i created this slide show but it does not change by it self how can i set a time for it to change automatically is there is a way to that now it will just change whenever i press a button otherwise it wont change here is my codes
HTML
<div class="slideshow-container" style="width: 100%;height: 500px" >
<?php
$get = $data->show(" SELECT * FROM movies LIMIT 3 ");
foreach ($get as $row) {
$id=$row['id'];
$name=$row['m_name'];
$type=$row['type'];
$description=$row['description'];
$trailer=$row['trailer'];
$background=$row['background'];
?>
<div class="mySlides " style="">
<div class="numbertext">1 / 3</div>
<img src="../../src/upload/posts/<?php echo $background; ?>" style="width:100%;height: 500px">
<div class="content text-left">
<h2 style="color: white;"><?php echo "$name"; ?><a><button type="button" class="btn btn-danger p-1 m-2"><span class="fa fa-play">ترایلهر</button></span></h2>
<h3 style="color: #fdd835;"><?php echo "$type"; ?></h3>
<h3 style="color: #fdd835;"><?php echo "$description"; ?></h3>
</div>
</div>
<?php } ?>
<!-- Next and previous buttons -->
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<br>
<!-- The dots/circles -->
<div style="text-align:center;width: 100%">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
</div>
Javascript
var slideIndex = 1;
showSlides(slideIndex);
// Next/previous controls
function plusSlides(n) {
showSlides(slideIndex += n);
}
// Thumbnail image controls
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
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";
}
im trying to that for about 2 days and i still did not get it can anyone help me with this
If you need to animate the slides continuously after a period, then use the setInterval method.
The following will animate your slides after 3 s. But please make sure your slideIndex is initialized.
var intervalID = setInterval(()=> {
try {
showSlides(slideIndex += 1);
} catch Exception {
console.log(Exception);
}
}, 3000);
If you want to remove the above interval worker, you will need to use the following
clearInterval(intervalID);
Related
I have this code for the JavaScript image slider:
<div class="container">
<!-- Full-width images with caption text -->
<div class="image-sliderfade fade">
<img src="https://via.placeholder.com/150" style="width:100%">
<div class="text">Image caption 1</div>
</div>
<div class="image-sliderfade fade">
<img src="https://via.placeholder.com/150" style="width:100%">
<div class="text">Image caption 2</div>
</div>
<div class="image-sliderfade fade">
<img src="https://via.placeholder.com/150" style="width:100%">
<div class="text">Image caption 3</div>
</div>
<div class="image-sliderfade fade">
<img src="https://via.placeholder.com/150" style="width:100%">
<div class="text">Image caption 4</div>
</div>
</div>
<!-- The dots/circles -->
<div style="text-align:center">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
<span class="dot" onclick="currentSlide(4)"></span>
</div>
And Js code is :
<script type="text/javascript">
var slideIndex = 0;
showSlides(); // call showslide method
function currentSlide(n) {
console.log(n);
showSlides(slideIndex = n);
}
function showSlides( n ) {
var i;
var slides = document.getElementsByClassName("image-sliderfade");
var dots = document.getElementsByClassName("dot");
if (n > slides.length) {
slideIndex = 1;
}
if (n < 1) {
slideIndex = slides.length;
}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
if(!n) {
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, 3000);
}
</script>
It's looping automatically and I want to go to a specific slider on click event. Now, If I click on a specific slider using the dot then the slider is looping too fast !
Is there anything I am wrong? How can I fix it?
Reason why it keeps speeding p is you keep adding more and more timers. You need to cancel timers that may exist when you click.
var sliderTimer;
function currentSlide(n) {
console.log(n);
if (sliderTimer) window.clearTimeout(sliderTimer);
showSlides(slideIndex = n);
}
and when you create the timer
sliderTimer = setTimeout(showSlides, 3000);
I am trying to create a slideshow image gallery by following this https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_slideshow_gallery
I am also using #foreach to get the images. So far, I have managed to get the images and the next/previous buttons are working fine. But I am not sure how to do the onClick part.
here is my code
view/blade
<div class="row">
#foreach ($images as $image)
<div class="mySlides">
<img src="{{ asset($image->image_location) }}" style="width:100%" alt="slide">
</div>
#endforeach
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<div class="row">
#foreach ($images as $image)
<div class="column">
<img class="demo cursor" src="{{ asset($image->image_location) }}" style="width:100%" onclick="currentSlide(1)" alt="Image not Available">
</div>
#endforeach
</div>
script
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("demo");
var captionText = document.getElementById("caption");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
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";
captionText.innerHTML = dots[slideIndex-1].alt;
}
Inside the blade #foreach loop, a $loop variable is available, as described here: https://laravel.com/docs/7.x/blade#the-loop-variable
You may use $loop->index to access the index of your thumbnail image in the array, and use that in the onclick event:
onclick="currentSlide({{ $loop->index }})"
I am currently attempting to open a modal for these images. When I click them, nothing happens. My best guess is that it has something to do with the openModal function on the first two lines of the JS file, I think I need to change where it gets the document, but I am not too sure.
function openModal(){
document.getElementById("myModal").style.display = "block";
}
function closeModal(){
document.getElementById("myModal").style.display = "none";
}
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function plusSlides(n) {
showSlides(slideIndex = n);
}
function currentSlides(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("demo");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for ( i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < slides.length; i++) {
dots[i].className = dots[i].className.replace(" active ", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
}
<!--Gallery-->
<section id="gallery">
<div class="container">
<h1>Gallery</h1>
<div class="flex-container">
<!--photo container-->
<div class="photo-container">
<div class="photo">
<img src="images/thumbnail_1.jpg" onclick="openModal();currentSlide(1)" alt="">
<div class="photo-overlay">
<h3>Click to Enlarge</h3>
<p>We have several books fr you</p>
</div>
</div>
</div>
</div>
<div id="myModal" class="modal">
<span class="close cursor" onclick="closeModal()">×</span>
<div class="modal-content"></div>
<div class="mySlides">
<div class="numberText">1 / 9</div>
<img src="images/thumbnail_1.jpg" style="width: 100%;" alt="image 1">
</div>
<!--Thumbnail Image Controls-->
<div class="column">
<img class="demo" src="images/thumbnail_1.jpg" onclick="currentSlide(1)" alt="image">
</div>
Web console from the pageI have a simple website based on PHP platform, then I decided to add an automatic JavaScript slider on one of the specific page, before then that the side link works fine but when automatic slide show kicks in the side link doesn't work. Again i removed the slideshow code then it again works fine? My question is how can i make the js slideshow and side link work?
I have tried searching the queries, played with divs and tags but couldn't find the solution
<div id="slide">
<div class="slideshow-container">
<div class="mySlides fade"> <img src="<?php echo $this->baseurl ?>/images/alumni 1.png" style="width:100%" alt=""> </div>
<div class="mySlides fade"> <img src="<?php echo $this->baseurl ?>/images/alumni 6.png" style="width:100%" alt=""> </div>
<div class="mySlides fade"> <img src="<?php echo $this->baseurl ?>/images/alumni 7.png" style="width:100%" alt=""> </div>
<div class="mySlides fade"> <img src="<?php echo $this->baseurl ?>/images/alumni 9.png" style="width:100%" alt=""> </div>
<a class="prev" onclick="plusSlides(-1)">❮</a> <a class="next" onclick="plusSlides(1)">❯</a> </div>
<tr>
<td>
<div style="text-align:center">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
<span class="dot" onclick="currentSlide(4)"></span>
<script>
var slideIndex = 0;
showSlides();
var slides,dots;
function showSlides() {
var i;
slides = document.getElementsByClassName("mySlides");
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, 8000); // Change image every 8 seconds
}
function plusSlides(position) {
slideIndex +=position;
if (slideIndex> slides.length) {slideIndex = 1}
else if(slideIndex<1){slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
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";
}
function currentSlide(index) {
if (index> slides.length) {index = 1}
else if(index<1){index = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[index-1].style.display = "block";
dots[index-1].className += " active";
}
</script>
</div>
</td>
</tr>
</div>
</td>
</tr>
I want my side navigation link to be working with slideshow, when slideshow loads as the side link doesnot navigate me to other page.
I'm trying to split array result into two slides. I have round about 50+ entries in my array. I want to show just 14 on each slide/page. I want to show the remaining in other slides/pages.
What i tried is below:
<div class="mySlides fade">
<div class='content'>
<div class="symptoms-container">
<?php
$slideCount = 1;
$symptomCount = 1;
?>
<div class="row">
<?php foreach($symptoms as $id => $symptom): ?>
<div class="col-md-6">
<ul class="check-list">
<li>
<label class="label_check" for="symptom_<?php echo $symptom['id'] ?>">
<input type="checkbox" data-gender="<?php echo $symptom['gender'] ?>" id="symptom_<?php echo $symptom['id'] ?>" name="symptom[<?php echo $symptom['id'] ?>]" value="<?php echo $symptom['id'] ?>" />
<?php echo $symptom['title'] ?>
</label>
</li>
<ul>
</div>
<?php $symptomCount++; ?>
<?php endforeach; ?>
</div>
<!--Row END-->
</div>
</div>
</div>
The above code is showing all symptoms/data/entries in one page i want the first 14 in one slide and the 2nd 14 in 2nd slide and so on. I hope it make sense.
Slides Code:
<div class="mySlides fade">
<div class='content'>
First Slide
</div>
</div>
</div>
<div class="mySlides fade">
<div class='content'>
This is a form and symptoms data 2
</div>
</div>
<div style="text-align:center">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
</div><!-- Slider Next Prev Buttons End -->
JS:
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "inline";
dots[slideIndex-1].className += " active";
}
Thanks for your time. Any help will be highly appreciated. let me know if further requirements is needed.
Thank you so much.
You can split the array with array_chunk and loop each chunk.
General idea:
$symptoms = range(1,50); // your array
$chunks = array_chunk($symptoms, 14); // split it to chunks of 14
foreach($chunks as $chunk){
echo "<div class='mySlides fade'>\n<div class='content'>\n"; // the html that creates the slide
foreach($chunk as $symptom){
echo $symptom . "\n"; // echoes 14 symptoms
}
echo "</div>\n</div>\n";
}
https://3v4l.org/K5smh