js اسلایدر

[SAMIRA23]

سلام




ببخشید می تونید کمکم کنید ؟من فقط مشکل در یک اسلایدر دارم کد های ان را زدم با js ولی نمیشه به صورت scroll انجام میشه و
photo_2019-08-27_18-22-03.jpg
photo_2019-08-27_18-22-18.jpg
به صورت اسلایدی نمایش نمیشه من کد های این اسلایدر را به صورت وردپرس زدم و js برای اسلایدر آن استفاده کردم به این صورت
کد 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[i].style.display = 'none';
}
}




function no_active(){
for( i = 0 ; i<dot.length ; i++){
dot[i].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)

شده بنظرتون مشکل از کجاست من انقدر js کپی مردم نمیدونم کدوم مهم و کدوم نیاز ندارم کمکم کنید و به همین خاطر کد های نیز برای یک اسلایدر برای text طراحی ردم اونم به صورت
photo_2019-08-27_18-31-01.jpg
مکانش مجله حبری روز به صورت ul است نه اسلایدی مشکل برای دانلود js است یا فایلی دیگه