رفتن به مطلب

کار نکردن اسلایدر عکس و متن


پست های پیشنهاد شده


من یک اسلایدر زدم با jsولی نمیشه وقتی اسلاید میشه ب صورت scrollو ul  نه اسلایدی اینم کد html


<div class="col-12 col-md-6 pb-0 pb-md-3 pt-2 pr-md-1">
                    <div id="featured" class="carousel slide carousel" data-ride="carousel">
                        ّ <div id="dots" class="carousel-indicators">
                            <span class="dot active" data-target="#carousel-example-generic"></span>
                        </div>
                        <div id="slider">
                            <!--Item slider-->
                            <?php
                            $args = array(
                                'posts_per_page' => 5,
                                'cat' => 10,
                            );
                            $query = new WP_Query($args);
                            ?>
                            <?php if ($query->have_posts()) : ?>
                            <?php $i = 0; ?>
                            <?php while ($query->have_posts()) : $query->the_post() ?>
                            <div class="slide active">
                                <div class="card border-0 rounded-0 text-light overflow zoom">
                                    <div class="position-relative">
                                        <!--thumbnail img-->
                                        <div class="ratio_left-cover-1 image-wrapper overflow">
                                            <a href="<?php the_permalink(); ?>">
                                                <?php
                                                        $src = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), 'full', false);
                                                        ?>
                                                <?php the_post_thumbnail("w-100 img-thumbnail mx-auto d-block overflow"); ?>

                                            </a>
                                        </div>
                                        <div class="position-absolute p-2 p-lg-3 b-0 w-100 bg-shadow">
                                            <!--title-->
                                            <a href="<?php the_permalink(); ?>">
                                                <h2 class="h3 post-title text-white my-1"><?php the_title(); ?></h2>
                                            </a>
                                            <!— meta title —>
                                            <div class="news-meta">
                                                <span class="news-author">by <a class="text-white font-weight-bold" href="<?php the_permalink(); ?>"><?php the_author(); ?></a></span>
                                                <span class="news-date"><?php the_time('d‌ F‌ Y'); ?></span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <?php endwhile ?>
                            <?php endif ?>
                            <?php wp_reset_postdata(); ?>
                            <!--end item slider-->
                        </div>
                    </div>
                    <!--end carousel inner-->
                    <!--navigation-->
                    <a class="carousel-control-prev prev" href="#featured" role="button" data-slide="prev">
                        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                        <span class="sr-only">Previous</span>
                    </a>
                    <a class="carousel-control-next next" href="#featured" role="button" data-slide="next">
                        <span class="carousel-control-next-icon" aria-hidden="true"></span>
                        <span class="sr-only">Next</span>
                    </a>
                    <script type="text/javascript">

                    </script>
                </div>


اینم کد js


var slide = document.getElementsByClassName('slide');
var dot = document.getElementsByClassName('dot');
var prev = document.querySelector('.prev');
var next = document.querySelector('.next');
var n = 0;
var i;

function disno(){
    for( i = 0 ; i<slide.length ; i++){
        slide.style.display = 'none';
    }
}

function no_active(){
    for( i = 0 ; i<dot.length ; i++){
        dot.classList.remove('active');
    }
}

next.addEventListener('click',function(e){
    e.preventDefault();
    n++;
    if( n > slide.length - 1){ // length starts From 1
        n = 0; // Arrays Starts From zero
    }
    disno();
    no_active()
    slide[n].style.display = 'block';
    dot[n].classList.add('active');
})

prev.addEventListener('click',function(e){
    e.preventDefault();
    n--;
    if( n < 0){ // length starts From 1
        n = slide.length - 1; // Arrays Starts From zero
    }
    disno();
    no_active()
    slide[n].style.display = 'block';
    dot[n].classList.add('active');
})

setInterval(function(){
    n++;
    if( n > slide.length - 1){ // length starts From 1
        n = 0; // Arrays Starts From zero
    }
    disno();
    no_active()
    slide[n].style.display = 'block';
    dot[n].classList.add('active');
},3000)

photo_2019-08-27_18-22-03.jpg

photo_2019-08-27_18-22-18.jpg

photo_2019-08-27_18-31-01.jpg

لینک به ارسال

لطفا برای ارسال دیدگاه وارد شوید

شما بعد از اینکه وارد حساب کاربری خود شدید می توانید دیدگاهی ارسال کنید



ورود به حساب کاربری
×
×
  • اضافه کردن...