The actual task was - on click image/div in slider
- (Slider) image margin change
- (Slider) image top text opacity change
At start(when page loaded, for first slider) the below code works fine as I intended. But when I drag or click next/previous button on click event, text opacity working but image margin not changes. Even after drag/click next/previous button the initial slider(1st & 2nd slider in example) work fine, but its next sliders (3rd & 4th in example) not.
I have tried multiple way like on click - add class, remove class, toggle class, adding css using jquery. Below code example used splide. I also tried with slider from bootstrap, but same output.
I don't know if I made things confusing, I'm putting full example code below for better understanding.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Slider</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@splidejs/[email protected]/dist/css/splide.min.css">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6 fzT" crossorigin="anonymous">
<style>
.slide-margin{
position: absolute;
z-index: 0;
transition: all 0.5s ease-in;
}
.slide-margin-left{
margin-left: 500px;
z-index: 15;
}
</style>
</head>
<body>
<div >
<div role="group">
<div >
<ul >
<li style="min-height: 800px;">
<div data-id="1">
<img src="slider4.jpg" alt="..." id="slider1">
<div style="top: 40vh;">
<div style="width: 500px; opacity: 0;" >
<h3>Tower C</h3>
<h5>2020</h5>
<h3>PROJECT INFO</h3>
<p>Competition winning project. ZHA will build the ambitious development of interlinked towers in the heart of a buzzing district in Shenzhen, China. Tower C will include several facilities, such as conference and exhibition venues, cultural hotspots, while incorporating residential developments and transportation hubs.</p>
<h4>CLIENT</h4>
<p>Zaha Hadid Architects</p>
</div>
</div>
</div>
</li>
<li style="min-height: 800px;">
<div data-id="2">
<img src="slider5.jpg" alt="..." id="slider2">
<div style="top: 40vh;">
<div style="width: 500px; opacity: 0;" >
<h3>Tower C</h3>
<h5>2020</h5>
<h3>PROJECT INFO</h3>
<p>Competition winning project. ZHA will build the ambitious development of interlinked towers in the heart of a buzzing district in Shenzhen, China. Tower C will include several facilities, such as conference and exhibition venues, cultural hotspots, while incorporating residential developments and transportation hubs.</p>
<h4>CLIENT</h4>
<p>Zaha Hadid Architects</p>
</div>
</div>
</div>
</li>
<li style="min-height: 800px;">
<div data-id="3">
<img src="slider6.jpg" alt="..." id="slider3">
<div style="top: 40vh;">
<div style="width: 500px; opacity: 0;" >
<h3>Tower C</h3>
<h5>2020</h5>
<h3>PROJECT INFO</h3>
<p>Competition winning project. ZHA will build the ambitious development of interlinked towers in the heart of a buzzing district in Shenzhen, China. Tower C will include several facilities, such as conference and exhibition venues, cultural hotspots, while incorporating residential developments and transportation hubs.</p>
<h4>CLIENT</h4>
<p>Zaha Hadid Architects</p>
</div>
</div>
</div>
</li>
<li style="min-height: 800px;">
<div data-id="4">
<img src="slider3.jpg" alt="..." id="slider4">
<div style="top: 40vh;">
<div style="width: 500px; opacity: 0;" >
<h3>Tower C</h3>
<h5>2020</h5>
<h3>PROJECT INFO</h3>
<p>Competition winning project. ZHA will build the ambitious development of interlinked towers in the heart of a buzzing district in Shenzhen, China. Tower C will include several facilities, such as conference and exhibition venues, cultural hotspots, while incorporating residential developments and transportation hubs.</p>
<h4>CLIENT</h4>
<p>Zaha Hadid Architects</p>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB VDvE9tvIXrMQaPlFFSUTR nldQm1LuPXQ=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@splidejs/[email protected]/dist/js/splide.min.js"></script>
<script>
$(function(){
var i = 1
$(document).on('click', '.slider-click', function(){
var id = $(this).data("id");
$('#slider' id).toggleClass('slide-margin-left');
if(i == 1){
$(".slider-text" id).css({"opacity": "100", "transition": "all 1s ease-in"});
i = 0;
}else{
$(".slider-text" id).css({"opacity": "0", "transition": "all 0.25s ease-in"});
i = 1;
}
// console.log(i " - " id);
});
});
</script>
<script>
var splide = new Splide( '.splide',{
type : 'loop',
padding: '15rem'
});
splide.mount();
</script>
</body>
</html>
Greatly appreciate any help or hints. Thank you
CodePudding user response：
Just made minor changes
<script>
jQuery(function($){
$('.slider-click').on('click', function(){
let id = $(this).attr('data-id');
if($(this).children('img').hasClass('slide-margin-left')){
$(this).children('img').removeClass('slide-margin-left');
$(".slider-text" id).css({"transition": "all 0.25s ease-in","opacity": "0"});
}else{
$(this).children('img').addClass('slide-margin-left');
$(".slider-text" id).css({"transition": "all 1s ease-in","opacity": "100"});
}
})
})
</script>