زمان دار کردن اسلایدر

سلام
آرگومان دوم setTimeout رو تغییر بدید . برحسب میلی ثانیه هست و هر ثانیه برابر با 1000 میلی ثانیه هست

@sinaQasemi
سلام
کمی بد سوال رو مطرح کردم وگرنه خودم بلد بودم ...
مشکل اینه که وقتی این کار را میکنم ، زمانی که هیچ عکسی نمایش داده نمیشود هم طولانی می شود ...

1. خب دلیل عدم نمایش عکس رو پیدا کنین. record با آدرس خالی ذخیره نیست تو sliders???
   2.تعداد dot ها باید برابر با تعداد slider ها باشه

     @foreach ($sliders as $slider) 
   <span class="dot"></span>
     @endforeach

@sinaQasemi
نه نه اشتباه نشه ...!
عکس نمایش داده میشه . اما وقتی setTimeout(ShowSlides,1000); را بیشتر میکنم زمانی که عکسی وجود نداره و در حال انتقال به عکس بعدی هست هم زمانش بیشتر میشه ...
دنبال راهی هستم که فقط زمان نمایش تصویر بیشتر بشه

سلام من توصیه میکنم از کتابخونه ها استفاده کنین حتی دیجی کالا هم برای اسلایدر از کتابخونه استفاده میکنه

دوست من !

زمانی که عکسی وجود نداره و در حال انتقال به عکس بعدی هست

مربوط به کلاس fade هست در style !
این کد رو در blade قرار بدید :

    <div class="slider col-lg-9 col-md-12 col-sm-12" style="margin-top: 15px;display: inline-block;height: 500px;">
      @foreach ($sliders as $slider)
        <div class="mySlides fade" style="overflow: hidden;height: 500px;">
            <a href="{{$slider->adress}}" target="blank"><img src="{{$slider->img}}" style="width: 100%;height: 500px;border-radius: 20px;" class="img-slider"/></a>
        </div>
      @endforeach
        <div style="text-align: center;margin-top: -30px;position: relative;z-index: 100;">
            @foreach ($sliders as $slider)
            <span class="dot"></span>
            @endforeach
        </div>
    </div>

و با تغییر اون دوتا مورد میتونید زمان بندی رو تغییر بدید.

به طور اتفاقی کد شما بینهایت شبیه به کد Automatic Slideshow در w3school هست. برای نمایش متن هم میتونید چیزی مثل کلاس .text در کد w3schools رو پیاده سازی کنید . ولی با یک بکگراند ساده

سلام

نمونه کد

کد های CSS

*{
    padding: 0;
    margin: 0;
}
body{
    font-family: 'vazir';
    direction: rtl;
}

.home{
    height: 100vh;
    overflow: hidden;
    position: relative;
}

.home .slide{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    z-index: 1;
    display: none;
    animation: slide 2s ease;
    -webkit-animation: slide 2s ease;
}
.home .slide.active{
    display: flex;
}
@keyframes slide{
    0%{
        opacity: 0;
        transform: scale(1.1);
        -webkit-transform: scale(1.1);
        -moz-transform: scale(1.1);
        -ms-transform: scale(1.1);
        -o-transform: scale(1.1);
}
100%{
    opacity: 1;
    transform: scale(1);
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
}
}

.slide .container{
    width: 90%;
    margin: auto;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.slide .caption{
    width: 500px;
    text-align: center;
}

.slide .caption h2{
    font-size: 60px;
    color: #fff;
}

.home .slide.active .caption h2{
    opacity: 0;
    animation: captionText .5s ease forwards;
    -webkit-animation: captionText .5s ease forwards;
    animation-delay: 1s;
}

.slide .caption p{
    font-size: 40px;
    color: #fff;
    margin-top: 30px;
    margin-bottom: 50px;
}
.home .slide.active .caption p{
    opacity: 0;
    animation: captionText .5s ease forwards;
    -webkit-animation: captionText .5s ease forwards;
    animation-delay: 1.2s;
}
.slide .caption a{
    text-decoration: none;
    color: #fff;
    font-size: 25px;
    background: #c3361d;
    padding: 10px;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;
}

.home .slide.active .caption a{
    opacity: 0;
    animation: captionText .5s ease forwards;
    -webkit-animation: captionText .5s ease forwards;
    animation-delay: 1.4s;
}

@keyframes captionText{
    0%{
        opacity: 0;
        transform: translateX(-100px);
        -webkit-transform: translateX(-100px);
        -moz-transform: translateX(-100px);
        -ms-transform: translateX(-100px);
        -o-transform: translateX(-100px);
}
100%{
    opacity: 1;
    transform: translateX(0);
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
}
}

.controls .next,
.controls .prev{
    position: absolute;
    z-index: 2;
    top: 50%;
    background-color: #333;
    color: #fff;
    cursor: pointer;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
}
.next{
    right: 0;
}

.prev{
    left: 0;
}

.controls .next svg,
.controls .prev svg{
    width: 40px;
    height: 40px;
    padding: 10px;
}

.controls .next:hover,
.controls .prev:hover{
    background: #c3361d;
}

.indicator{
    position: absolute;
    bottom: 50px;
    left: 50%;
    z-index: 2;
    display: flex;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
}

.indicator div{
    width: 25px;
    height: 25px;
    background: #333;
    color: #fff;
    margin: 0 15px;

    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.indicator div.active{
    background: #c3361d;
}

کد های Html:

<body>

    <section class="home">
        <div class="slider">
            <div class="slide active" style="background-image: url('img/1.jpg');">
                <div class="container">
                    <div class="caption">
                        <h2>زمین زیبا</h2>
                        <p>عاشقانه زندگی کن</p>
                        <a href="#">عاشقانه</a>
                    </div>
                </div>
            </div>
            <div class="slide" style="background-image: url('img/2.jpg');">
                <div class="container">
                    <div class="caption">
                        <h2>با من بخوان</h2>
                        <p>با هم عاشقانه هایمان را میخوانیم</p>
                        <a href="">اشعار عاشقانه</a>
                    </div>
                </div>
            </div>
            <div class="slide" style="background-image: url('img/3.jpg');">
                <div class="container">
                    <div class="caption">
                        <h2>عاشقانه </h2>
                        <p>شیرینی در تمام لحظه ها</p>
                        <a href="">لحظات خود را ثبت کن</a>
                    </div>
                </div>
            </div>
        </div>

        <div class="controls">
            <div class="next"><i class="fas fa-chevron-right"></i></div>
            <div class="prev"><i class="fas fa-chevron-left"></i></div>
        </div>

        <div class="indicator"></div>

    </section>

    <script src="js/all.min.js"></script>
    <script src="js/script.js"></script>
</body>

کد های js:

const slides = document.querySelector('.slider').children;
console.log(slides);
const next = document.querySelector('.next');
const prev = document.querySelector('.prev');
const indicator = document.querySelector('.indicator');
let index = 0;

prev.addEventListener('click', function(){
    prevSlide();
    updateCircleIndicator();
    resetTimer();
})

next.addEventListener('click', function(){
    nextSlide();
    updateCircleIndicator();
    resetTimer();
})

function circleIndicator(){
    for(let i= 0;i<slides.length;i++){
        const div = document.createElement('div');
        div.innerHTML = i+1;
        div.setAttribute('onclick','indicatorSlide(this)');
        div.id =i
        if(i==0){
            div.className = "active"
        }
        indicator.appendChild(div)
    }
}

circleIndicator();

function updateCircleIndicator(){
    for(let i =0; i<indicator.children.length;i++){
        indicator.children[i].classList.remove('active')
    }
    indicator.children[index].classList.add('active');

}

function indicatorSlide(element){
    index = element.id;
    changeSlide();
    updateCircleIndicator();
    resetTimer();
}

function prevSlide(){
    if(index==0){
        index = slides.length-1;
    }else{
        index--
    }
    console.log
    changeSlide()
}

function nextSlide(){
    if(index==slides.length-1){
        index=0
    }else{
        index++
    }
    changeSlide()
}

function changeSlide(){
    for(let i = 0; i< slides.length;i++){
        slides[i].classList.remove('active')
    }
    slides[index].classList.add('active')
}

function resetTimer(){
    clearInterval(timer);
    timer = setInterval(autoplay, 4000);
}

function autoplay(){
    nextSlide();
    updateCircleIndicator();
}

let timer = setInterval(autoplay, 4000);