I want to create a slick slider that its last item from right be bigger than the others
like the image,
here is a regular slick slider: I want to make this look like the image can anyone help me
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="./slick.css" />
<link rel="stylesheet" href="./slick-theme.css" />
</head>
<body>
<div class="scale_slick">
<div><img src="https://picsum.photos/200" alt="" /></div>
<div><img src="https://picsum.photos/200" alt="" /></div>
<div><img src="https://picsum.photos/200" alt="" /></div>
<div><img src="https://picsum.photos/200" alt="" /></div>
<div><img src="https://picsum.photos/200" alt="" /></div>
<div><img src="https://picsum.photos/200" alt="" /></div>
<div><img src="https://picsum.photos/200" alt="" /></div>
<div><img src="https://picsum.photos/200" alt="" /></div>
<div><img src="https://picsum.photos/200" alt="" /></div>
<div><img src="https://picsum.photos/200" alt="" /></div>
</div>
<script
src="https://code.jquery.com/jquery-3.5.1.min.js"
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
crossorigin="anonymous"
></script>
<script src="./slick.min.js"></script>
<script>
$(".scale_slick").slick({
slidesToShow: 4,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 5000,
});
</script>
</body>
</html>
try like this
here slidesToShow: 4 so , try .slick-active + .slick-active + .slick-active + .slick-active
.slick-active + .slick-active + .slick-active + .slick-active{
transform: scale(1.3);
border: 1px solid rgb(17, 17, 17);
}
Live demo :
.slick-active + .slick-active + .slick-active + .slick-active{
transform: scale(1.3);
border: 1px solid rgb(17, 17, 17);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.css" integrity="sha512-wR4oNhLBHf7smjy0K4oqzdWumd+r5/+6QO/vDda76MW5iug4PT7v86FoEkySIJft3XA0Ae6axhIvHrqwm793Nw==" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.js" integrity="sha512-WNZwVebQjhSxEzwbettGuQgWxbpYdoLf7mH+25A7sfQbbxKeS5SQ9QBf97zOY4nOlwtksgDA/czSTmfj4DUEiQ==" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css" integrity="sha512-yHknP1/AwR+yx26cB1y0cjvQUMvEa2PFzt1c9LlS4pRQ5NOTZFWbhBig+X9G9eYW/8m0/4OXNx8pxJ6z57x0dw==" crossorigin="anonymous" />
</head>
<body>
<div class="scale_slick">
<div><img src="https://picsum.photos/200" alt="" /></div>
<div><img src="https://picsum.photos/200" alt="" /></div>
<div><img src="https://picsum.photos/200" alt="" /></div>
<div><img src="https://picsum.photos/200" alt="" /></div>
<div><img src="https://picsum.photos/200" alt="" /></div>
<div><img src="https://picsum.photos/200" alt="" /></div>
<div><img src="https://picsum.photos/200" alt="" /></div>
<div><img src="https://picsum.photos/200" alt="" /></div>
<div><img src="https://picsum.photos/200" alt="" /></div>
<div><img src="https://picsum.photos/200" alt="" /></div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js" integrity="sha512-XtmMtDEcNz2j7ekrtHvOVR4iwwaD6o/FUJe6+Zq+HgcCsk3kj4uSQQR8weQ2QVj1o0Pk6PwYLohm206ZzNfubg==" crossorigin="anonymous"></script>
<script>
$(".scale_slick").slick({
slidesToShow: 4,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 5000,
});
</script>
</body>
</html>
Related
I have a container in which it is a horizontal scroll slider. I am just trying to figure how to show the element that is in the viewport at the time
I tried to look for left. I tried to put the slides in an array and look for the x axis but I am a little stumped.
This is my scroll function.
const scroll = () => {
const scrollContainer = document.querySelector('.slider');
scrollContainer.addEventListener('wheel', (e) => {
e.preventDefault();
scrollContainer.scrollLeft += e.deltaY;
});
};
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>demo</title>
</head>
<body>
<div class="slider hidden" id="slideshowContainer">
<div class="innerSlider" id="innerSlider">
<div class="slide">
<img src="https://images.unsplash.com/photo-1586023492125-27b2c045efd7?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=958&q=80" alt="" draggable="false" />
</div>
<div class="slide">
<img src="https://images.unsplash.com/photo-1583847268964-b28dc8f51f92?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80" alt="" draggable="false" />
</div>
<div class="slide">
<img src="https://images.unsplash.com/photo-1586105251261-72a756497a11?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=958&q=80" alt="" draggable="false" />
</div>
<div class="slide">
<img src="https://images.unsplash.com/photo-1618220048045-10a6dbdf83e0?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=880&q=80" alt="" draggable="false" />
</div>
<div class="slide">
<img src="https://images.unsplash.com/photo-1513694203232-719a280e022f?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1169&q=80" alt="" />
</div>
<div class="slide">
<img src="https://images.unsplash.com/photo-1513694203232-719a280e022f?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1169&q=80" alt="" draggable="false" />
</div>
<div class="slide">
<img src="https://images.unsplash.com/photo-1513694203232-719a280e022f?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1169&q=80" alt="" draggable="false" />
</div>
</div>
</div>
</body>
</html>
i have created multiple carousels using Slick (https://kenwheeler.github.io/slick/) on single page. They all have the same class and setting (mainly autoplay infinite), but they change within diffrent time. I'm not able to synchronize them.
Gif with the problem:
https://imgur.com/wFGpADi
I have even created example: https://jsfiddle.net/ou85zmqj
$(document).ready(function() {
$('.slick').slick({
slidesToShow: 1,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 2000,
arrows: false,
pauseOnHover: false
});
});
.slick {
margin: 0 auto;
max-width: 200px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel#1.8.1/slick/slick.css" />
</head>
<body>
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel#1.8.1/slick/slick.min.js"></script>
<div class="slick">
<img src="https://picsum.photos/200/300" alt="">
<img src="https://picsum.photos/200/301" alt="">
<img src="https://picsum.photos/200/302" alt="">
<img src="https://picsum.photos/200/303" alt="">
</div>
<div class="slick">
<img src="https://picsum.photos/200/304" alt="">
<img src="https://picsum.photos/200/305" alt="">
<img src="https://picsum.photos/200/306" alt="">
<img src="https://picsum.photos/200/307" alt="">
</div>
<div class="slick">
<img src="https://picsum.photos/200/308" alt="">
<img src="https://picsum.photos/200/309" alt="">
<img src="https://picsum.photos/200/310" alt="">
</div>
</body>
</html>
Can i do something to keep them synchronized?
One solution is to set the first slideshow to autoplay and have it control the others by setting the asNavFor property. When the first slideshow changes, it will immediately change the other two.
The only problem with using this approach is that it requires the slideshows to have the same number of slides, otherwise it may not rotate through all the slides (if the controlling slideshow has fewer) or show the last slide more than once (if the controlling slideshow has more).
$(document).ready(function(){
$('.slick1').slick({
slidesToShow: 1,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 2000,
arrows: false,
pauseOnHover: false,
asNavFor: '.slick2'
});
$('.slick2').slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
pauseOnHover: false
});
});
.slick {
margin: 0 auto;
max-width: 200px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel#1.8.1/slick/slick.css" />
</head>
<body>
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel#1.8.1/slick/slick.min.js"></script>
<div class="slick slick1">
<img src="https://picsum.photos/200/300" alt="">
<img src="https://picsum.photos/200/301" alt="">
<img src="https://picsum.photos/200/302" alt="">
<img src="https://picsum.photos/200/303" alt="">
</div>
<div class="slick slick2">
<img src="https://picsum.photos/200/304" alt="">
<img src="https://picsum.photos/200/305" alt="">
<img src="https://picsum.photos/200/306" alt="">
<img src="https://picsum.photos/200/307" alt="">
</div>
<div class="slick slick2">
<img src="https://picsum.photos/200/308" alt="">
<img src="https://picsum.photos/200/309" alt="">
<img src="https://picsum.photos/200/310" alt="">
<img src="https://picsum.photos/200/311" alt="">
</div>
</body>
</html>
Another solution is to have the first slideshow trigger the next slide of the other two slideshows, using the beforeChange event. This version will work no matter how many slides are in each slideshow.
$(document).ready(function(){
$('.slick1').slick({
slidesToShow: 1,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 2000,
arrows: false,
pauseOnHover: false
});
$('.slick2').slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
pauseOnHover: false
});
// First slideshow triggers the other two to change
$('.slick1').on('beforeChange', function(event, slick, currentSlide, nextSlide){
$('.slick2').slick('slickNext');
});
});
.slick {
margin: 0 auto;
max-width: 200px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel#1.8.1/slick/slick.css" />
</head>
<body>
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel#1.8.1/slick/slick.min.js"></script>
<div class="slick slick1">
<img src="https://picsum.photos/200/300" alt="">
<img src="https://picsum.photos/200/301" alt="">
<img src="https://picsum.photos/200/302" alt="">
<img src="https://picsum.photos/200/303" alt="">
</div>
<div class="slick slick2">
<img src="https://picsum.photos/200/304" alt="">
<img src="https://picsum.photos/200/307" alt="">
</div>
<div class="slick slick2">
<img src="https://picsum.photos/200/308" alt="">
<img src="https://picsum.photos/200/309" alt="">
<img src="https://picsum.photos/200/310" alt="">
</div>
</body>
</html>
I want to implement a slick vertical slider with option fade: true. I want a fading effect in the vertical slider. It is showing the first slide but 2nd and 3rd slides are not visible.
Below is the code that I had tried.
$('.MySlider').slick({
vertical: true,
dots: true,
infinite: true,
speed: 500,
fade: true
});
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel#1.8.1/slick/slick.css">
<section>
<div class="MySlider">
<div class="item">
<div class="image_container">
<img src="https://www.placecage.com/600/300" alt="" />
</div>
</div>
<div class="item">
<div class="image_container">
<img src="https://www.placecage.com/600/300" alt="" />
</div>
</div>
<div class="item">
<div class="image_container">
<img src="https://www.placecage.com/600/300" alt="" />
</div>
</div>
</div>
</section>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel#1.8.1/slick/slick.min.js"></script>
I had resolved my issue by giving my custom CSS.
$('.MySlider').slick({
dots: true,
infinite: true,
speed: 500,
vertical:true,
verticalSwiping: true
});
.slick-slide {
opacity:0;
transition:opacity 0.5s ease-out;
}
.slick-active {
opacity:1!important;
transition:opacity 0.5s ease-in;
}
.slick-cloned {
opacity: 0.3;
}
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel#1.8.1/slick/slick.css">
<section>
<div class="MySlider">
<div class="item">
<div class="image_container">
<img src="https://www.placecage.com/600/300" alt="" />
</div>
</div>
<div class="item">
<div class="image_container">
<img src="https://www.placecage.com/700/300" alt="" />
</div>
</div>
<div class="item">
<div class="image_container">
<img src="https://www.placecage.com/800/300" alt="" />
</div>
</div>
</div>
</section>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel#1.8.1/slick/slick.min.js"></script>
Consider the following example
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
img {
max-width:600px;
}
</style>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
</head>
<body>
<div><img class="myimage" src="http://www.planwall.com/lk.jpg" alt="org"></div>
<div><img class="myimage" src="http://www.planwer.com/my.jpg" alt="org"></div>
<div><img class="myimage" src="http://www.plwallpaper.com/static/images/slkdl.png" alt="org"></div>
<div><img class="myimage" src="http://www.pnwallpaper.com/static/images/er5.png" alt="org"></div>
<div><img class="myimage" src="http://www.planwlpaper.com/static/images/3col.png" alt="org"></div>
<div><img class="myimage" src="http://www.planaper.com/sttic/images/fghdfg.png" alt="org"></div>
<div><img class="myimage" src="http://www.pwalper.com/sttic/imaes/3dsfgdg45.png" alt="org"></div>
<div><img class="myimage" src="http://www.planwallpaper.com/static/images/34rt5.png" alt="org"></div>
<div><img class="myimage" src="http://www.planwaaper.com/static/images/7004205-cool-black-backgrounds-27640_lhK8IKI.jpg" alt=""></div>
<div><img class="myimage" src="http://www.wallpeast.com/wallpaper-cool/page/4#static/images/free-cool-wallpaper-17426-18158-hd-wallpapers.jpg" alt=""></div>
<script>
/*
for(var i=0; i<document.getElementsByTagName("img").length; i++) {
document.getElementsByTagName("img")[i].addEventListener("error", function() {
this.src = "https://cdn.colorlib.com/wp/wp-content/uploads/sites/2/404-not-found-error-page-examples.png";
});
}
*/
</script>
<script>
$(document).ready(function(){
$("img").on("error", function(){
$(this).attr( "src", "http://www.freeiconspng.com/uploads/error-icon-28.png" );
});
});
</script>
</body>
</html>
All the images have wrong url by default. The error event is assigned to all the img tags. The src of images that get error is changed. Everything works fine. The problem is if I put jquery cdn in the footer then the src attribute is not replaced. Example below:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
img {
max-width:600px;
}
</style>
</head>
<body>
<div><img class="myimage" src="http://www.planwall.com/lk.jpg" alt="org"></div>
<div><img class="myimage" src="http://www.planwer.com/my.jpg" alt="org"></div>
<div><img class="myimage" src="http://www.plwallpaper.com/static/images/slkdl.png" alt="org"></div>
<div><img class="myimage" src="http://www.pnwallpaper.com/static/images/er5.png" alt="org"></div>
<div><img class="myimage" src="http://www.planwlpaper.com/static/images/3col.png" alt="org"></div>
<div><img class="myimage" src="http://www.planaper.com/sttic/images/fghdfg.png" alt="org"></div>
<div><img class="myimage" src="http://www.pwalper.com/sttic/imaes/3dsfgdg45.png" alt="org"></div>
<div><img class="myimage" src="http://www.planwallpaper.com/static/images/34rt5.png" alt="org"></div>
<div><img class="myimage" src="http://www.planwaaper.com/static/images/7004205-cool-black-backgrounds-27640_lhK8IKI.jpg" alt=""></div>
<div><img class="myimage" src="http://www.wallpeast.com/wallpaper-cool/page/4#static/images/free-cool-wallpaper-17426-18158-hd-wallpapers.jpg" alt=""></div>
<script>
/*
for(var i=0; i<document.getElementsByTagName("img").length; i++) {
document.getElementsByTagName("img")[i].addEventListener("error", function() {
this.src = "https://cdn.colorlib.com/wp/wp-content/uploads/sites/2/404-not-found-error-page-examples.png";
});
}
*/
</script>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script>
$(document).ready(function(){
$("img").on("error", function(){
$(this).attr( "src", "http://www.freeiconspng.com/uploads/error-icon-28.png" );
});
});
</script>
</body>
</html>
The question is simple:
Why does onerror event not work for img tag when jquery is put in the footer?
When I look into the console then out of 10 only 3 or 4 images have received error others are appended with [18ms] or some other time like `[21ms] etc.
Your code is not working since the error events are raised before your jquery handlers are bound.
The browser loads the item as they are found in the dom. So when you add the jquery script at the end. The browser will already have started loading the img tags that is above them. By the time the jQuery is loaded parsed and your document is ready and your handler is bound most of your images would have already been error-ed or loaded.
The below code Will work since after document is ready it creates an in-memory img items to check if the images are loaded properly. Additional images if added will be handled by the handler.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
img {
max-width:600px;
}
</style>
</head>
<body>
<div><img class="myimage" src="http://www.planwall.com/lk.jpg" alt="org"></div>
<div><img class="myimage" src="http://www.planwer.com/my.jpg" alt="org"></div>
<div><img class="myimage" src="http://www.plwallpaper.com/static/images/slkdl.png" alt="org"></div>
<div><img class="myimage" src="http://www.pnwallpaper.com/static/images/er5.png" alt="org"></div>
<div><img class="myimage" src="http://www.planwlpaper.com/static/images/3col.png" alt="org"></div>
<div><img class="myimage" src="http://www.planaper.com/sttic/images/fghdfg.png" alt="org"></div>
<div><img class="myimage" src="http://www.pwalper.com/sttic/imaes/3dsfgdg45.png" alt="org"></div>
<div><img class="myimage" src="http://www.planwallpaper.com/static/images/34rt5.png" alt="org"></div>
<div><img class="myimage" src="http://www.planwaaper.com/static/images/7004205-cool-black-backgrounds-27640_lhK8IKI.jpg" alt=""></div>
<div><img class="myimage" src="http://www.wallpeast.com/wallpaper-cool/page/4#static/images/free-cool-wallpaper-17426-18158-hd-wallpapers.jpg" alt=""></div>
<script>
/*
for(var i=0; i<document.getElementsByTagName("img").length; i++) {
document.getElementsByTagName("img")[i].addEventListener("error", function() {
this.src = "https://cdn.colorlib.com/wp/wp-content/uploads/sites/2/404-not-found-error-page-examples.png";
});
}
*/
</script>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script>
$(document).ready(function(){
$("img").each(function(i,ele){
$("<img/>").attr("src",$(ele).attr("src")).on('error', function() {
$(ele).attr( "src", "http://www.freeiconspng.com/uploads/error-icon-28.png" );
})
});
$("img").on("error", function(){
$(this).attr( "src", "http://www.freeiconspng.com/uploads/error-icon-28.png" );
});
});
</script>
</body>
</html>
jquery using with class
so you can use .myimage
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
img {
max-width:600px;
}
</style>
</head>
<body>
<div><img class="myimage" src="http://www.planwall.com/lk.jpg" alt="org"></div>
<div><img class="myimage" src="http://www.planwer.com/my.jpg" alt="org"></div>
<div><img class="myimage" src="http://www.plwallpaper.com/static/images/slkdl.png" alt="org"></div>
<div><img class="myimage" src="http://www.pnwallpaper.com/static/images/er5.png" alt="org"></div>
<div><img class="myimage" src="http://www.planwlpaper.com/static/images/3col.png" alt="org"></div>
<div><img class="myimage" src="http://www.planaper.com/sttic/images/fghdfg.png" alt="org"></div>
<div><img class="myimage" src="http://www.pwalper.com/sttic/imaes/3dsfgdg45.png" alt="org"></div>
<div><img class="myimage" src="http://www.planwallpaper.com/static/images/34rt5.png" alt="org"></div>
<div><img class="myimage" src="http://www.planwaaper.com/static/images/7004205-cool-black-backgrounds-27640_lhK8IKI.jpg" alt=""></div>
<div><img class="myimage" src="http://www.wallpeast.com/wallpaper-cool/page/4#static/images/free-cool-wallpaper-17426-18158-hd-wallpapers.jpg" alt=""></div>
<script>
/*
for(var i=0; i<document.getElementsByTagName("img").length; i++) {
document.getElementsByTagName("img")[i].addEventListener("error", function() {
this.src = "https://cdn.colorlib.com/wp/wp-content/uploads/sites/2/404-not-found-error-page-examples.png";
});
}
*/
</script>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script>
$(document).ready(function(){
$(".myimage").on("error", function(){
$(this).attr( "src", "http://www.freeiconspng.com/uploads/error-icon-28.png" );
});
});
</script>
</body>
</html>
Here is my HTML page:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
<title>Demo slider</title>
<link href="themes/1/js-image-slider.css" rel="stylesheet" type="text/css" />
<script src="themes/1/js-image-slider.js" type="text/javascript"></script>
</head>
<body>
<div id="sliderFrame">
<div id="slider">
<img src="images/image-slider-1.jpg" id="img1" alt="" />
<img src="images/image-slider-2.jpg" id="img2" alt="" />
<img src="images/image-slider-3.jpg" id="img3" alt="" />
<img src="images/image-slider-4.jpg" id="img4" alt="" />
<img src="images/image-slider-5.jpg" id="img5" alt="" />
</div>
</div>
<div id="custom_text">
<h1 style="color: blue;">Image 1 text</h1>
</div>
<div id="custom_text1">
<h1 style="color: blue;">Image 2 text</h1>
</div>
<div id="custom_text2">
<h1 style="color: blue;">Image 3 text</h1>
</div>
<div id="custom_text3">
<h1 style="color: blue;">Image 4 text</h1>
</div>
<div id="custom_text4">
<h1 style="color: blue;">Image 5 text</h1>
</div>
</body>
</html>
Using menucool's Javascript Image Slider library: link to site
I want to display different text on different images i tried it giving absolute and relative positions to div and img tag but unable to acheive the output.
The javascript slider function is the predefined function.Basically i want to achieve this
This is why you always read the documentation:
http://www.menucool.com/javascript-image-slider#view2
Captions are set through each slide image's alt attribute. If the
image is formatted as lazy loaded image, its caption can be defined by
the title or data-alt attribute:
HTML
<img src="//placehold.it/250x250" id="img1" alt="Caption one" />
<img src="//placehold.it/249x249" id="img2" alt="Caption two" />
<img src="//placehold.it/251x251" id="img3" alt="Caption three" />
<img src="//placehold.it/248x248" id="img4" alt="Caption four" />
<img src="//placehold.it/252x252" id="img5" alt="Caption five" />
JSFiddle Demo