js اسلایدر

سلام




ببخشید می تونید کمکم کنید ؟من فقط مشکل در یک اسلایدر دارم کد های ان را زدم با js ولی نمیشه به صورت scroll انجام میشه و
ضمیمه 150668
ضمیمه 150669
به صورت اسلایدی نمایش نمیشه من کد های این اسلایدر را به صورت وردپرس زدم و 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 طراحی ردم اونم به صورت
ضمیمه 150670
مکانش مجله حبری روز به صورت ul است نه اسلایدی مشکل برای دانلود js است یا فایلی دیگه