من خودم یک اسلایدر نوشتم با جاوااسکریپت :
کد های 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>
حالا میخواهم بهش امکان دادن متن و همچنین امکان زمان بدم ؟ هر چی سعی کردم نشد متاسفانه ...
امکانش هست راهنمایی بفرمایید ؟
دوست من !
زمانی که عکسی وجود نداره و در حال انتقال به عکس بعدی هست
مربوط به کلاس 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 رو پیاده سازی کنید . ولی با یک بکگراند ساده
سلام
آرگومان دوم setTimeout رو تغییر بدید . برحسب میلی ثانیه هست و هر ثانیه برابر با 1000 میلی ثانیه هست
@sinaQasemi
سلام
کمی بد سوال رو مطرح کردم وگرنه خودم بلد بودم ...
مشکل اینه که وقتی این کار را میکنم ، زمانی که هیچ عکسی نمایش داده نمیشود هم طولانی می شود ...
@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);
آیا مایل به ارسال نوتیفیکیشن و اخبار از طرف راکت هستید ؟