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

4 روز پیش توسط گمنام آپدیت شد
آفلاین
user-avatar
گمنام ( 47946 تجربه )
3 هفته پیش
تخصص : طراح وب ، برنامه نویس

لینک کوتاه اشتراک گذاری

2

من خودم یک اسلایدر نوشتم با جاوااسکریپت :
کد های css

<style>
    .dot {
      height: 16px;
      width: 16px;
      margin: 0 2px;
      background-color: rgb(255, 255, 255);
      display: inline-block;
      border-radius: 50%;
      transition: 0.6s ease;
    }
    .active {
      background-color: rgb(102, 102, 102);
    }
    .fade {
      -webkit-animation-name: fade;
      -webkit-animation-duration: 1.5s;
      animation-name: fade;
      animation-duration: 1.5s;
    }
    @-webkit-keyframes fade {
      from {opacity: .4}
      to {opacity: 1}
    }
    @keyframes fade {
      from {opacity: .4}
      to {opacity: 1}
    }
</style>

کد های js :

var slideIndex = 0;
      ShowSlides();
      function ShowSlides() {
          var i;
          var slides = document.getElementsByClassName("mySlides");
          var dots = document.getElementsByClassName("dot");

          for(i=0;i < slides.length;i++)
          {
              slides[i].style.display="none";
          }
          slideIndex++;
          if(slideIndex > slides.length)
          {
              slideIndex = 1;
          }

          for(i=0;i<dots.length;i++)
          {
              dots[i].className = dots[i].className.replace(" active","");
          }

          slides[slideIndex - 1].style.display = "block";
          dots[slideIndex -1].className +=" active";

          setTimeout(ShowSlides,1000);
      }

و این هم کدش در ویوی لاراولم هست :

<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;">
        <span class="dot"></span>
        <span class="dot"></span>
        <span class="dot"></span>
        <span class="dot"></span>
        <span class="dot"></span>
    </div>

حالا میخواهم بهش امکان دادن متن و همچنین امکان زمان بدم ؟ هر چی سعی کردم نشد متاسفانه ...
امکانش هست راهنمایی بفرمایید ؟

بهترین پاسخ
آفلاین
user-avatar
sinaQ
3 هفته پیش

دوست من !

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

مربوط به کلاس 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 رو پیاده سازی کنید . ولی با یک بکگراند ساده

آفلاین
user-avatar
sinaQ ( 28084 تجربه )
3 هفته پیش

لینک کوتاه اشتراک گذاری

1

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

آفلاین
user-avatar
گمنام ( 47946 تجربه )
3 هفته پیش
تخصص : طراح وب ، برنامه نویس

لینک کوتاه اشتراک گذاری

0

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

آفلاین
user-avatar
sinaQ ( 28084 تجربه )
3 هفته پیش

لینک کوتاه اشتراک گذاری

0
  1. خب دلیل عدم نمایش عکس رو پیدا کنین. record با آدرس خالی ذخیره نیست تو sliders???
    2.تعداد dot ها باید برابر با تعداد slider ها باشه
      @foreach ($sliders as $slider) 
    <span class="dot"></span>
      @endforeach
آفلاین
user-avatar
گمنام ( 47946 تجربه )
3 هفته پیش
تخصص : طراح وب ، برنامه نویس

لینک کوتاه اشتراک گذاری

0

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

آفلاین
user-avatar
amir ( 8553 تجربه )
3 هفته پیش
تخصص : بک اند و فرانت اند

لینک کوتاه اشتراک گذاری

-2

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

آفلاین
user-avatar
sinaQ ( 28084 تجربه )
3 هفته پیش

لینک کوتاه اشتراک گذاری

0

دوست من !

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

مربوط به کلاس 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 رو پیاده سازی کنید . ولی با یک بکگراند ساده

آفلاین
user-avatar
محمد حسین ( 11263 تجربه )
3 هفته پیش

لینک کوتاه اشتراک گذاری

0

سلام

نمونه کد

کد های 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);
برای ارسال پاسخ لازم است، ابتدا وارد سایت شوید.