Im trying to make a W3 slider dynamic the original slider is from this-link
i want to make it in a way that it only displys all the bottom images and only current image at the top see this-link for better understanding.
with my code everythings is displayed double.
This is my code for the slider:
<section id="slider">
<div class="container wow fadeInUp">
<div class="row">
<div class="col-md-12">
<h3 class="section-title">Photo Gallery</h3>
<div class="section-title-divider"></div>
<div class="w3-content" style="max-width:1200px">
<?php
include("admin/db/db.php");
$select_db = "select * from gallery";
$run_events = mysql_query($select_db);
while($row=mysql_fetch_array($run_events)){
$id = $row['id'];
$image= $row['image'];
?>
<img class="mySlides" src="admin/images/gallery/<?php echo $image; ?>" style="width:100%;height:350px;">
<div class="w3-row-padding w3-section">
<div class="w3-col s4">
<img class="demo w3-opacity w3-hover-opacity-off" src="admin/images/gallery/<?php echo $image; ?>" style="width:100%" onclick="currentDiv(<?php echo $id; ?>)">
</div>
<?php }?>
</div>
</div>
<script>
var slideIndex = 1;
showDivs(slideIndex);
function plusDivs(n) {
showDivs(slideIndex += n);
}
function currentDiv(n) {
showDivs(slideIndex = n);
}
function showDivs(n) {
var i;
var x = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("demo");
if (n > x.length) {slideIndex = 1}
if (n < 1) {slideIndex = x.length}
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" w3-opacity-off", "");
}
x[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " w3-opacity-off";
}
</script>
</div>
</div>
</div>
</section>
You need to replace your code with this and see:
<section id="slider">
<div class="container wow fadeInUp">
<div class="row">
<div class="col-md-12">
<h3 class="section-title">Photo Gallery</h3>
<div class="section-title-divider"></div>
<div class="w3-content" style="max-width:1200px">
<?php
include("admin/db/db.php");
$select_db = "select * from gallery";
$run_events = mysql_query($select_db);
while($row=mysql_fetch_array($run_events)){
$id = $row['id'];
$image= $row['image'];
?>
<img class="mySlides" src="admin/images/gallery/<?php echo $image; ?>" style="width:100%;height:350px;">
<div class="w3-row-padding w3-section">
<div class="w3-col s4">
<img class="demo w3-opacity w3-hover-opacity-off" src="admin/images/gallery/<?php echo $image; ?>" style="width:100%" onclick="currentDiv(<?php echo $id; ?>)">
</div>
</div>
<?php }?>
</div>
<script>
var slideIndex = 1;
showDivs(slideIndex);
function plusDivs(n) {
showDivs(slideIndex += n);
}
function currentDiv(n) {
showDivs(slideIndex = n);
}
function showDivs(n) {
var i;
var x = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("demo");
if (n > x.length) {slideIndex = 1}
if (n < 1) {slideIndex = x.length}
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" w3-opacity-off", "");
}
x[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " w3-opacity-off";
}
</script>
</div>
</div>
</div>
</section>
Related
I have Carousal Slider and i am trying to change the images when click to small images but unfortunately getting error please help me how can i resolve that thank u.
please check error
Uncaught TypeError: Cannot read properties of undefined (reading 'className')
jquery script
var slideIndex = 1;
showSlides(slideIndex);
// Next/previous controls
function plusSlides(n) {
showSlides(slideIndex += n);
}
// Thumbnail image controls
function currentSlide(n) {
showSlides(slideIndex = n);
}
**script**
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;
}
Html view
<!--Start Carousel wrapper -->
<div class="col-md-4 me-5">
<div id="carouselExampleIndicators" class="carousel slide carousel-fade" data-mdb-
ride="carousel">
<!-- Slides -->
<div class="carousel-inner mb-5">
#foreach ($marchandiseShop->marchandiseDetails as $key => $value)
<div class="carousel-item {{$key == 0 ? 'active' : '' }}">
<img src="{{ Config('wfh.file').$value->images}}" class="d-block w-100" alt="..." data-mdb-toggle="modal" data-mdb-target="#lightbox"/>
</div>
#endforeach
</div>
<!-- Slides -->
<!-- Thumbnails -->
<div class="carousel-indicators" style="margin-bottom: -20px;">
#foreach ($marchandiseShop->marchandiseDetails as $key => $value)
<button type="button" data-mdb-target="#carouselExampleIndicators" data-mdb-slide-to="0" class="{{$key == 0 ? 'active' : '' }}"
aria-current="true" aria-label="Slide 1" style="width: 100px;">
<img class="d-block w-100"
src="{{ Config('wfh.file').$value->images}}" class="img-fluid" />
</button>
#endforeach
</div>
<!-- Thumbnails -->
</div>
<!-- Carousel wrapper -->
You should use FOR LOOP to make relation between small pics and slides. At the same time for loop is necessary to add active class to each related slide. Look at this example:
<div class="col-md-4 me-5">
<div id="carouselExampleIndicators" class="carousel slide carousel-fade" data-mdb-ride="carousel">
<div class="carousel-inner mb-5">
</div>
<div class="carousel-indicators" style="margin-bottom: -20px;">
</div>
</div>
</div>
#foreach ($marchandiseShop->marchandiseDetails as $value)
<script>
$(document).ready(function(){
for(let k = 0; k < 1; k++) {
$('<div class="carousel-item"><img src="{{ Config('wfh.file').$value->images}}" class="d-block w-100"> </div> ').appendTo('.carousel-inner');
$('<button type="button" data-mdb-target="#carouselExampleIndicators" data-mdb-slide-to="'+k+'" aria-current="true" aria-label="Slide '+k+'" style="width: 100px;"> <img class="d-block w-100" src="{{ Config('wfh.file').$value->images}}" class="img-fluid" /> </button>').appendTo('.carousel-indicators');
}
$('.carousel-item').first().addClass('active');
$('.carousel-indicators > button').first().addClass('active');
$('#carouselExampleIndicators').carousel();
});
</script>
#endforeach
Can you help me a little, please? I have no experience with JavaScript yet. I would like to change images every 5 seconds, but the buttons remain functional (ie when I press them, change the image, even if the 5 seconds have not yet passed). Thank you very much!
<div class="mySlides fade">
<div class="titlu">Traffic Signs Tutor</div>
<img src="imagini/driving1.jpg">
</div>
<div class="mySlides fade">
<div class="titlu">Traffic Signs Tutor</div>
<img src="imagini/driving6.jpg">
</div>
<div class="mySlides fade">
<div class="titlu">Traffic Signs Tutor</div>
<img src="imagini/driving3.jpg">
</div>
<div class="mySlides fade">
<div class="titlu">Traffic Signs Tutor</div>
<img src="imagini/driving2.jpg">
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</section>
<div class="dots" >
<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>
<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("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";
}
</script>
The following code achieves exactly what you want. Every time a news slide is set the old timer gets invalidated and a new one is initiated. The timer will run the plusSlides function every 5 seconds. Hope this code helps you:
<section>
<div class="mySlides fade">
<div class="titlu">Traffic Signs Tutor 1</div>
<img src="imagini/driving1.jpg">
</div>
<div class="mySlides fade">
<div class="titlu">Traffic Signs Tutor 2</div>
<img src="imagini/driving6.jpg">
</div>
<div class="mySlides fade">
<div class="titlu">Traffic Signs Tutor 3</div>
<img src="imagini/driving3.jpg">
</div>
<div class="mySlides fade">
<div class="titlu">Traffic Signs Tutor 4</div>
<img src="imagini/driving2.jpg">
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</section>
<div class="dots" >
<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>
<script>
//timer
var newSlide;
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n = +1) {
slideIndex = slideIndex + n;
showSlides(slideIndex);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
//invalidate old timer
clearInterval(newSlide);
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";
//set a new interval
newSlide = setInterval(plusSlides, 5000);
}
</script>
I have some problem in the script -
Html -
<div class="slideshow-container">
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<img src="img_nature_wide.jpg" style="width:100%">
<div class="text">Caption Text</div>
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 3</div>
<img src="img_snow_wide.jpg" style="width:100%">
<div class="text">Caption Two</div>
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 3</div>
<img src="img_mountains_wide.jpg" style="width:100%">
<div class="text">Caption Three</div>
</div>
<a class="prev" onclick="plusSlides(-1)">jjjj</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<br>
<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>
Script -
<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("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";
}
</script>
Question
If showSlides in showSlides(slideIndex) is a function where slide Index is passed as a parimeter
What is n here , if it is a perimeter , why it's data type is not defined
function plusSlides(n) {
showSlides(slideIndex += n);
}
If showSlides is a function then how it is defined under function plusSlides() function
What is n in the Script
n gets propagated as 1 here. When we call showSlides(slideIndex) we are really doing showSlides(1). Since the only parameter of showSlides is n, then we're setting n=1 in the scope of that specific function call.
showSlides is indeed a function, and all that plusSlides(n) does is call showSlides with a new parameter.
I want to display image caption under each images in image slider.
But right now my problem is all the image captions are displaying for each image like this
View :
<div class="grid-11 left">
#if (Model.Photos.Count > 0)
{
<div style="padding:10px">
<div class="slide-content" style="max-width:800px">
#foreach (var photos in Model.Photos)
{
<div>
<img class="mySlides" src="#Url.Content(photos.photo_url)"/>
</div>
<span>#photos.photo_caption</span>
}
<div class="w3-center">
<div class="w3-section">
<button class="w3-button w3-light-grey" onclick="plusDivs(-1)">❮ </button>
<button class="w3-button w3-light-grey" onclick="plusDivs(1)"> ❯</button>
</div>
</div>
</div>
</div>
}
</div>
Script :
var slideIndex = 1;
showDivs(slideIndex);
function plusDivs(n) {
showDivs(slideIndex += n);
}
function currentDiv(n) {
showDivs(slideIndex = n);
}
function showDivs(n) {
var i;
var x = document.getElementsByClassName("mySlides");
if (n > x.length) {
slideIndex = 1
}
if (n < 1) {
slideIndex = x.length
}
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
x[slideIndex - 1].style.display = "block";
}
How do is display caption for each image by passing image_id?
The problem is you're targeting the image only for display block/none via class="mySlides". You need to wrap the image and caption in some sort of container and target that instead.
#foreach (var photos in Model.Photos)
{
<div class="mySlides">
<div>
<img src="#Url.Content(photos.photo_url)"/>
</div>
<span>#photos.photo_caption</span>
</div>
}
I have a page with several buttons, when each button is clicked a different modal pops up. Some of the modals are carousels, the code I have works but for only one of the carousels, when I have more than one I get extra empty slides on all the carousels. So I'm guessing my code is counting all the slides from all the carousels together. Im trying to have write something where it says if this modal is clicked then get the slides from the clicked modal only but Im struggling with that.
These are the bits of relevant code:
<script>
//Carousel
var slideIndex = 1;
showDivs(slideIndex);
function plusDivs(n) {
showDivs(slideIndex += n);
}
function currentDiv(n) {
showDivs(slideIndex = n);
}
function showDivs(n) {
var i;
var x = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("demo");
if (n > x.length) {slideIndex = 1}
if (n < 1) {slideIndex = x.length}
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
/*dots[i].className = dots[i].className.replace(" w3-white", "");*/
}
x[slideIndex-1].style.display = "block";
/*dots[slideIndex-1].className += " w3-white";*/
}
</script>
<script>
//Display corresponding modal of letter that is clicked
$(".button").on("click", function() {
var modal = $(this).data("modal");
$(modal).show();
document.body.classList.add("modal-open");
});
//Close modal when "x" is clicked or when area outside modal is clicked
$(".modal").on("click", function(e) {
var className = e.target.className;
if(className === "modal" || className === "close"){
$(this).closest(".modal").hide();
document.body.classList.remove("modal-open");
}
});
</script>
<button class="button" data-modal="#modalOne"><img id="myImg" src=""></button>
<button class="button" data-modal="#modalB"><img id="myImg" src=""></button>
<button class="button" data-modal="#modalC"><img id="myImg" src=""></button>
<!-- The Modal -->
<div id="modalA" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<div class= "mySlides">
<img class="gif" src="" width="100" height="100" >
<h4>Title</h4>
<p> content </p>
</div>
<div class="mySlides">
<h4 Title</h4>
<p> content </p>
</div>
<div class="w3-left w3-hover-text-khaki" onclick="plusDivs(-1)">❮</div>
<div class="w3-right w3-hover-text-khaki" onclick="plusDivs(1)">❯</div>
</div>
</div>
<!-- The Modal B -->
<div id="modalB" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<div class="mySlides">
<img class="gif" src="" width="100" height="100" >
<h4></h4>
<p></p>
</div>
</div>
</div>
<!-- The Modal C -->
<div id="modalC" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<div class="mySlides">
<img class="gif" src="" width="100" height="100" >
<h4></h4>
<p></p>
<div class="mySlides">
<h4></h4>
<p></p>
</div>
<div class="w3-left w3-hover-text-khaki" onclick="plusDivs(-1)">❮</div>
<div class="w3-right w3-hover-text-khaki" onclick="plusDivs(1)">❯</div>
</div>
</div>
When you do this line
var x = document.getElementsByClassName("mySlides");
You count all the elements with class name of "mySlides", which is ALL of the slides in the HTML document.
Add code in your button click routine to count the number of slides in the corresponding modal:
Add this at the top of the javascript:
var modal = "modalA";
showDivs(slideIndex, modal);
Change the button click to:
$(".button").on("click", function() {
modal = $(this).data("modal").text();
$("#" + modal).show();
document.body.classList.add("modal-open");
});
Modify your showDivs function to include the new variable:
function showDivs(n, modal) {
var i;
var x = document.getElementById(modal).getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("demo");
if (n > x.length) {slideIndex = 1}
if (n < 1) {slideIndex = x.length}
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
/*dots[i].className = dots[i].className.replace(" w3-white", "");*/
}
x[slideIndex-1].style.display = "block";
/*dots[slideIndex-1].className += " w3-white";*/
}
Finally, change the data-modal attributes of your buttons to read:
<button class="button" data-modal="modalA">
<button class="button" data-modal="modalB">
<button class="button" data-modal="modalC">
You will also need to update the lines:
function plusDivs(n) {
showDivs(slideIndex += n, modal);
}
function currentDiv(n) {
showDivs(slideIndex = n, modal);
}