samira127 0 ارسال شده در شهریور 98 گزارش بازنشر ارسال شده در شهریور 98 من یک اسلایدر زدم با 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) لینک به ارسال
پست های پیشنهاد شده
لطفا برای ارسال دیدگاه وارد شوید
شما بعد از اینکه وارد حساب کاربری خود شدید می توانید دیدگاهی ارسال کنید
ورود به حساب کاربری