/**
 * FUNCTIONS FOR GET URL IMAGES FROM CUSTOM FIELD ACF
 */
function get_url_post_custom_field_acf($post_id = null){
    // GET CONTENT FROM ACF FIELD
    $content = get_field('nome_campo_acf',$post_id);
    // CREATE A EXPRESSION FOR GET URL IMG
    $regex = '/src="([^"]*)"/';
    // GET ALL MATCHES
    preg_match_all( $regex, $content, $matches );
    // REVERSING THE MATCHES ARRAY
    $matches = array_reverse($matches);
    // RETURN ARRAY URL IMAGES
    return $matches[0];
}

/**
 * PUT JS INTO FOOTER SINGLE.PHP FOR SLIDE
 */
add_action('wp_footer','js_slider_field_acf', 20);
function js_slider_field_acf(){
    if(is_singular('post')){
        ?>
        <script type="text/javascript">
        var slideIndex = 1;
        showSlides(slideIndex);

        function plusSlides(n) {
            showSlides(slideIndex += n);
        }

        function currentSlide(n) {
            showSlides(slideIndex = n);
        }

        function showSlides(n) {
            var i;
            var slides = document.getElementsByClassName("mySlides");
            if (n > slides.length) {slideIndex = 1}
            if (n < 1) {slideIndex = slides.length}
            for (i = 0; i < slides.length; i++) {
                slides[i].style.display = "none";
            }

            slides[slideIndex-1].style.display = "block";
            slides[slideIndex-1].className += " active";
        }
        </script>
        <?php
    }
}

/**
 * PUT CSS INTO FOOTER SINGLE.PHP FOR SLIDE
 */
add_action('wp_head','css_slider_field_acf', 20);
function css_slider_field_acf($post_id){
    if(is_singular('post')){
        ?>
        <style type="text/css">
        /* Slideshow container */
        .slideshow-container {
          max-width: 1000px;
          position: relative;
          margin: auto;
          clear: both;
        }

        .slideshow-container img {vertical-align: middle;}
        .slideshow-container .mySlides {display: none}

        /* Next & previous buttons */
        .slideshow-container .prev, .slideshow-container .next {
          cursor: pointer;
          position: absolute;
          top: 50%;
          width: auto;
          padding: 16px;
          margin-top: -22px;
          color: white;
          font-weight: bold;
          font-size: 18px;
          transition: 0.6s ease;
          border-radius: 0 3px 3px 0;
        }

        /* Position the "next button" to the right */
        .slideshow-container .next {
          right: 0;
          border-radius: 3px 0 0 3px;
        }

        /* On hover, add a black background color with a little bit see-through */
        .slideshow-container .prev:hover, .slideshow-container .next:hover {
          background-color: rgba(0,0,0,0.8);
        }

        /* Fading animation */
        .slideshow-container .fade {
          -webkit-animation-name: fade;
          -webkit-animation-duration: 1.5s;
          animation-name: fade;
          animation-duration: 1.5s;
        }

        @-webkit-keyframes fade {
          from {opacity: .4}
          to {opacity: 1}
        }

        @keyframes fade {
          from {opacity: .4}
          to {opacity: 1}
        }

        /* On smaller screens, decrease text size */
        @media only screen and (max-width: 300px) {
          .slideshow-container .prev, .slideshow-container .next, .slideshow-container .text {font-size: 11px}
        }
        </style>
        <?php
    }
}