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) نقل قول لینک به ارسال
پست های پیشنهاد شده
به گفتگو بپیوندید
هم اکنون می توانید مطلب خود را ارسال نمایید و بعداً ثبت نام کنید. اگر حساب کاربری دارید، برای ارسال با حساب کاربری خود اکنون وارد شوید .