我想多次重用此滑块，但目前，使其工作的jQuery仅适用于一个滑块，因此下一个和上一个和其他滑块不起作用，因为它们共享相同的ID，我不想重复我的操作自我，因此使用jquery的解决方案会有所帮助
尝试.closest .find jQuery方法
jQuery(document).ready(function(){
function detect_active(){
// get active
var get_active = $("#dp-slider .dp_item:first-child").data("class");
$("#dp-dots li").removeClass("active");
$("#dp-dots li[data-class="+ get_active +"]").addClass("active");
}
$("#dp-next").click(function(){
var total = $(".dp_item").length;
$("#dp-slider .dp_item:first-child").hide().appendTo("#dp-slider").fadeIn();
$.each($('.dp_item'), function (index, dp_item) {
$(dp_item).attr('data-position', index + 1);
});
detect_active();
});
$("#dp-prev").click(function(){
var total = $(".dp_item").length;
$("#dp-slider .dp_item:last-child").hide().prependTo("#dp-slider").fadeIn();
$.each($('.dp_item'), function (index, dp_item) {
$(dp_item).attr('data-position', index + 1);
});
detect_active();
});
$("#dp-dots li").click(function(){
$("#dp-dots li").removeClass("active");
$(this).addClass("active");
var get_slide = $(this).attr('data-class');
console.log(get_slide);
$("#dp-slider .dp_item[data-class=" + get_slide + "]").hide().prependTo("#dp-slider").fadeIn();
$.each($('.dp_item'), function (index, dp_item) {
$(dp_item).attr('data-position', index + 1);
});
});
$("body").on("click", "#dp-slider .dp_item:not(:first-child)", function(){
var get_slide = $(this).attr('data-class');
console.log(get_slide);
$("#dp-slider .dp_item[data-class=" + get_slide + "]").hide().prependTo("#dp-slider").fadeIn();
$.each($('.dp_item'), function (index, dp_item) {
$(dp_item).attr('data-position', index + 1);
});
detect_active();
});
}); *{
font-family: 'Lato', sans-serif;
}
.dp-wrap {
margin: 0 auto;
position: relative;
perspective: 1000px;
height: 100%;
}
.dp-slider {
height: 100%;
width: 100%;
position: absolute;
transform-style: preserve-3d;
}
.dp-slider div {
transform-style: preserve-3d;
}
.dp_item {
display: block;
position: absolute;
text-align: center;
color: #FFF;
border-radius: 10px;
transition: transform 1.2s;
}
.dp-img img {
border-left: 1px solid #fff;
}
#dp-slider .dp_item:first-child {
z-index: 10 !important;
transform: rotateY(0deg) translateX(0px) !important;
}
.dp_item[data-position="2"] {
z-index: 9;
transform: rotateY(0deg) translateX(10%) scale(0.9);
}
.dp_item[data-position="3"] {
z-index: 8;
transform: rotateY(0deg) translateX(20%) scale(0.8);
}
.dp_item[data-position="4"] {
z-index: 7;
transform: rotateY(0deg) translateX(30%) scale(0.7);
}
#dp-next,
#dp-prev {
position: absolute;
top: 50%;
right: 16%;
height: 33px;
width: 33px;
z-index: 10;
cursor: pointer;
}
#dp-prev {
left: 15px;
transform: rotate(180deg);
}
#dp-dots {
position: absolute;
bottom: 25px;
z-index: 12;
left: 38%;
cursor: default;
}
#dp-dots li {
display: inline-block;
width: 13px;
height: 13px;
background: #ffff;
border-radius: 50%;
}
#dp-dots li:hover {
cursor: pointer;
background: #FA8C8C;
transition: background .3s;
}
#dp-dots li.active {
background: #FA8C8C;
}
.dp_item {
width: 85%;
}
.dp-content ,
.dp-img {
text-align: left;
}
.dp_item {
display: flex;
align-items: center;
background: #fff;
border-radius: 10px;
overflow: hidden;
border-top: 5px solid #FA8C8C;
}
.dp-content {
padding-left: 100px;
padding-right: 0;
display: inline-block;
width: 100%;
}
.dp-content h2 {
color: #41414B;
font-family: Circular Std Bold;
font-size: 48px;
max-width: 460px;
margin-top: 8px;
margin-bottom: 0px;
}
.dp-content p {
color: #74747F;
max-width: 490px;
margin-top: 15px;
font-size: 24px;
}
.dp-content .site-btn {
margin-top: 15px;
font-size: 13px;
padding: 19px 40px;
}
.dp-img:before {
background: -webkit-linear-gradient(-90deg, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0));
background: -o-linear-gradient(-90deg, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0));
background: -moz-linear-gradient(-90deg, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0));
background: linear-gradient(-90deg, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0));
content: "";
position: absolute;
height: 100%;
width: 25%;
z-index: 1;
top: 0;
pointer-events: none;
background: -webkit-linear-gradient(-90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.75));
background: -o-linear-gradient(-90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.75));
background: -moz-linear-gradient(-90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.75));
background: linear-gradient(-90deg, rgba(255, 255, 255, 0), rgb(255, 255, 255));
}
.dp-img img {
object-fit: cover;
object-position: right;
}
#dp-slider,
.dp-img img {
height: 738px;
}
#dp-slider .dp_item:hover:not(:first-child) {
cursor: pointer;
}
.site-btn {
color: #fff;
font-size: 18px;
font-family: "Circular Std Medium";
background: #FA8282;
padding: 14px 43px;
display: inline-block;
border-radius: 2px;
position: relative;
top: -12px;
text-decoration: none;
}
.site-btn:hover{
text-decoration: none;
color: #fff;
}
h1 { margin: 150px auto 30px auto; text-align: center; }<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container" style="max-width: 1400px; margin: 0 auto;">
<div id="slider">
<div class="dp-wrap">
<div id="dp-slider">
<div class="dp_item" data-class="1" data-position="1">
<div class="dp-content">
<h2>Slide 1</h2>
<p> This is Slide 1 </p>
<a href="#" class="site-btn">Read More…</a>
</div>
<div class="dp-img">
<img class="img-fluid" src="https://placeimg.com/821/739/any" alt="investing">
</div>
</div>
<div class="dp_item" data-class="2" data-position="2">
<div class="dp-content">
<h2>Slide 2</h2>
<p> This is Slide 2 </p>
<a href="#" class="site-btn">Read More…</a>
</div>
<div class="dp-img">
<img class="img-fluid" src="https://placeimg.com/821/738/any" alt="investing">
</div>
</div>
<div class="dp_item" data-class="3" data-position="3">
<div class="dp-content">
<h2>Slide 3</h2>
<p> This is Slide 3 </p>
<a href="#" class="site-btn">Read More…</a>
</div>
<div class="dp-img">
<img class="img-fluid" src="https://placeimg.com/821/737/any" alt="investing">
</div>
</div>
<div class="dp_item" data-class="4" data-position="4">
<div class="dp-content">
<h2>Slide 4</h2>
<p> This is Slide 4 </p>
<a href="#" class="site-btn">Read More…</a>
</div>
<div class="dp-img">
<img class="img-fluid" src="https://placeimg.com/821/736/any" alt="investing">
</div>
</div>
</div>
<span id="dp-next">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 51.401 51.401">
<defs>
<style>
.cls-1 {
fill: none;
stroke: #fa8c8c;
stroke-miterlimit: 10;
stroke-width: 7px;
}
</style>
</defs>
<path id="Rectangle_4_Copy" data-name="Rectangle 4 Copy" class="cls-1" d="M32.246,0V33.178L0,31.953" transform="translate(0.094 25.276) rotate(-45)"/>
</svg>
</span>
<span id="dp-prev">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 51.401 51.401">
<defs>
<style>
.cls-1 {
fill: none;
stroke: #fa8c8c;
stroke-miterlimit: 10;
stroke-width: 7px;
}
</style>
</defs>
<path id="Rectangle_4_Copy" data-name="Rectangle 4 Copy" class="cls-1" d="M32.246,0V33.178L0,31.953" transform="translate(0.094 25.276) rotate(-45)"/>
</svg>
</span>
<ul id="dp-dots">
<li data-class="1" class="active"></li>
<li data-class="2"></li>
<li data-class="3"></li>
<li data-class="4"></li>
</ul>
</div>
</div>
</div>
<div class="container" style="max-width: 1400px; margin: 0 auto;">
<div id="slider">
<div class="dp-wrap">
<div id="dp-slider">
<div class="dp_item" data-class="1" data-position="1">
<div class="dp-content">
<h2>Slide 1</h2>
<p> This is Slide 1 </p>
<a href="#" class="site-btn">Read More…</a>
</div>
<div class="dp-img">
<img class="img-fluid" src="https://placeimg.com/821/739/any" alt="investing">
</div>
</div>
<div class="dp_item" data-class="2" data-position="2">
<div class="dp-content">
<h2>Slide 2</h2>
<p> This is Slide 2 </p>
<a href="#" class="site-btn">Read More…</a>
</div>
<div class="dp-img">
<img class="img-fluid" src="https://placeimg.com/821/738/any" alt="investing">
</div>
</div>
<div class="dp_item" data-class="3" data-position="3">
<div class="dp-content">
<h2>Slide 3</h2>
<p> This is Slide 3 </p>
<a href="#" class="site-btn">Read More…</a>
</div>
<div class="dp-img">
<img class="img-fluid" src="https://placeimg.com/821/737/any" alt="investing">
</div>
</div>
<div class="dp_item" data-class="4" data-position="4">
<div class="dp-content">
<h2>Slide 4</h2>
<p> This is Slide 4 </p>
<a href="#" class="site-btn">Read More…</a>
</div>
<div class="dp-img">
<img class="img-fluid" src="https://placeimg.com/821/736/any" alt="investing">
</div>
</div>
</div>
<span id="dp-next">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 51.401 51.401">
<defs>
<style>
.cls-1 {
fill: none;
stroke: #fa8c8c;
stroke-miterlimit: 10;
stroke-width: 7px;
}
</style>
</defs>
<path id="Rectangle_4_Copy" data-name="Rectangle 4 Copy" class="cls-1" d="M32.246,0V33.178L0,31.953" transform="translate(0.094 25.276) rotate(-45)"/>
</svg>
</span>
<span id="dp-prev">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 51.401 51.401">
<defs>
<style>
.cls-1 {
fill: none;
stroke: #fa8c8c;
stroke-miterlimit: 10;
stroke-width: 7px;
}
</style>
</defs>
<path id="Rectangle_4_Copy" data-name="Rectangle 4 Copy" class="cls-1" d="M32.246,0V33.178L0,31.953" transform="translate(0.094 25.276) rotate(-45)"/>
</svg>
</span>
<ul id="dp-dots">
<li data-class="1" class="active"></li>
<li data-class="2"></li>
<li data-class="3"></li>
<li data-class="4"></li>
</ul>
</div>
</div>
</div>
<div class="container" style="max-width: 1400px; margin: 0 auto;">
<div id="slider">
<div class="dp-wrap">
<div id="dp-slider">
<div class="dp_item" data-class="1" data-position="1">
<div class="dp-content">
<h2>Slide 1</h2>
<p> This is Slide 1 </p>
<a href="#" class="site-btn">Read More…</a>
</div>
<div class="dp-img">
<img class="img-fluid" src="https://placeimg.com/821/739/any" alt="investing">
</div>
</div>
<div class="dp_item" data-class="2" data-position="2">
<div class="dp-content">
<h2>Slide 2</h2>
<p> This is Slide 2 </p>
<a href="#" class="site-btn">Read More…</a>
</div>
<div class="dp-img">
<img class="img-fluid" src="https://placeimg.com/821/738/any" alt="investing">
</div>
</div>
<div class="dp_item" data-class="3" data-position="3">
<div class="dp-content">
<h2>Slide 3</h2>
<p> This is Slide 3 </p>
<a href="#" class="site-btn">Read More…</a>
</div>
<div class="dp-img">
<img class="img-fluid" src="https://placeimg.com/821/737/any" alt="investing">
</div>
</div>
<div class="dp_item" data-class="4" data-position="4">
<div class="dp-content">
<h2>Slide 4</h2>
<p> This is Slide 4 </p>
<a href="#" class="site-btn">Read More…</a>
</div>
<div class="dp-img">
<img class="img-fluid" src="https://placeimg.com/821/736/any" alt="investing">
</div>
</div>
</div>
<span id="dp-next">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 51.401 51.401">
<defs>
<style>
.cls-1 {
fill: none;
stroke: #fa8c8c;
stroke-miterlimit: 10;
stroke-width: 7px;
}
</style>
</defs>
<path id="Rectangle_4_Copy" data-name="Rectangle 4 Copy" class="cls-1" d="M32.246,0V33.178L0,31.953" transform="translate(0.094 25.276) rotate(-45)"/>
</svg>
</span>
<span id="dp-prev">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 51.401 51.401">
<defs>
<style>
.cls-1 {
fill: none;
stroke: #fa8c8c;
stroke-miterlimit: 10;
stroke-width: 7px;
}
</style>
</defs>
<path id="Rectangle_4_Copy" data-name="Rectangle 4 Copy" class="cls-1" d="M32.246,0V33.178L0,31.953" transform="translate(0.094 25.276) rotate(-45)"/>
</svg>
</span>
<ul id="dp-dots">
<li data-class="1" class="active"></li>
<li data-class="2"></li>
<li data-class="3"></li>
<li data-class="4"></li>
</ul>
</div>
</div>
</div>
每个滑块应独立
答案 0 :(得分：1)
我用Class替换了一些ID。 ID不应在同一文档上重复。 dp-slider ID将重复。我已重新编码JS。我希望现在一切正常。
jQuery(document).ready(function(){
function detect_active($ele){
// get active
var get_active = $ele.siblings("#dp-slider").find('.dp_item:first-child').data("class");
$ele.siblings(".dp-dots").find('li').removeClass("active");
$ele.siblings(".dp-dots").find("li[data-class="+ get_active +"]").addClass("active");
}
$(".dp-next").click(function(){
var total = $(this).siblings('#dp-slider').find(".dp_item").length;
var firstSlide = $(this).siblings("#dp-slider").find('.dp_item:first-child');
firstSlide.hide();
$(this).siblings("#dp-slider").append(firstSlide);
$(this).siblings("#dp-slider").find('.dp_item:last-child').fadeIn();
$(this).siblings('#dp-slider').find(".dp_item").each(function(index, dp_item) {
$(dp_item).attr('data-position', index + 1);
});
detect_active($(this));
});
$(".dp-prev").click(function(){
var total = $(this).siblings('#dp-slider').find(".dp_item").length;
var lastSlide = $(this).siblings("#dp-slider").find('.dp_item:last-child');
lastSlide.hide();
$(this).siblings("#dp-slider").prepend(lastSlide);
$(this).siblings("#dp-slider").find('.dp_item:first-child').fadeIn();
$(this).siblings('#dp-slider').find(".dp_item").each(function(index, dp_item) {
$(dp_item).attr('data-position', index + 1);
});
detect_active($(this));
});
$(".dp-dots li").click(function(){
$(this).siblings("li").removeClass("active");
$(this).addClass("active");
var get_slide = $(this).attr('data-class');
var targetSlide = $(this).parents('.dp-dots').siblings('#dp-slider').find(".dp_item[data-class=" + get_slide + "]");
targetSlide.hide();
$(this).parents('.dp-dots').siblings('#dp-slider').prepend(targetSlide);
$(this).parents('.dp-dots').siblings('#dp-slider').find('.dp_item:first-child').fadeIn();
$(this).parents('.dp-dots').siblings('#dp-slider').find(".dp_item").each(function(index, dp_item) {
$(dp_item).attr('data-position', index + 1);
});
});
$("body").on("click", "#dp-slider .dp_item:not(:first-child)", function(){
var get_slide = $(this).attr('data-class');
var clickedSlide = $(this).parents("#dp-slider").find(".dp_item[data-class=" + get_slide + "]");
clickedSlide.hide();
$(this).parents("#dp-slider").prepend(clickedSlide);
$(this).parents("#dp-slider").find('.dp_item:first-child').fadeIn();
$(this).parents("#dp-slider").find(".dp_item").each(function(index, dp_item) {
$(dp_item).attr('data-position', index + 1);
});
// $.each($('.dp_item'), function (index, dp_item) {
// $(dp_item).attr('data-position', index + 1);
// });
detect_active($(this).parents("#dp-slider").siblings('.dp-next'));
});
});*{
font-family: 'Lato', sans-serif;
}
.dp-wrap {
margin: 0 auto;
position: relative;
perspective: 1000px;
height: 100%;
}
.dp-slider {
height: 100%;
width: 100%;
position: absolute;
transform-style: preserve-3d;
}
.dp-slider div {
transform-style: preserve-3d;
}
.dp_item {
display: block;
position: absolute;
text-align: center;
color: #FFF;
border-radius: 10px;
transition: transform 1.2s;
}
.dp-img img {
border-left: 1px solid #fff;
}
#dp-slider .dp_item:first-child {
z-index: 10 !important;
transform: rotateY(0deg) translateX(0px) !important;
}
.dp_item[data-position="2"] {
z-index: 9;
transform: rotateY(0deg) translateX(10%) scale(0.9);
}
.dp_item[data-position="3"] {
z-index: 8;
transform: rotateY(0deg) translateX(20%) scale(0.8);
}
.dp_item[data-position="4"] {
z-index: 7;
transform: rotateY(0deg) translateX(30%) scale(0.7);
}
.dp-next,
.dp-prev {
position: absolute;
top: 50%;
right: 16%;
height: 33px;
width: 33px;
z-index: 10;
cursor: pointer;
}
.dp-prev {
left: 15px;
transform: rotate(180deg);
}
.dp-dots {
position: absolute;
bottom: 25px;
z-index: 12;
left: 38%;
cursor: default;
}
.dp-dots li {
display: inline-block;
width: 13px;
height: 13px;
background: #ffff;
border-radius: 50%;
}
.dp-dots li:hover {
cursor: pointer;
background: #FA8C8C;
transition: background .3s;
}
.dp-dots li.active {
background: #FA8C8C;
}
.dp_item {
width: 85%;
}
.dp-content ,
.dp-img {
text-align: left;
}
.dp_item {
display: flex;
align-items: center;
background: #fff;
border-radius: 10px;
overflow: hidden;
border-top: 5px solid #FA8C8C;
}
.dp-content {
padding-left: 100px;
padding-right: 0;
display: inline-block;
width: 100%;
}
.dp-content h2 {
color: #41414B;
font-family: Circular Std Bold;
font-size: 48px;
max-width: 460px;
margin-top: 8px;
margin-bottom: 0px;
}
.dp-content p {
color: #74747F;
max-width: 490px;
margin-top: 15px;
font-size: 24px;
}
.dp-content .site-btn {
margin-top: 15px;
font-size: 13px;
padding: 19px 40px;
}
.dp-img:before {
background: -webkit-linear-gradient(-90deg, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0));
background: -o-linear-gradient(-90deg, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0));
background: -moz-linear-gradient(-90deg, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0));
background: linear-gradient(-90deg, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0));
content: "";
position: absolute;
height: 100%;
width: 25%;
z-index: 1;
top: 0;
pointer-events: none;
background: -webkit-linear-gradient(-90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.75));
background: -o-linear-gradient(-90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.75));
background: -moz-linear-gradient(-90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.75));
background: linear-gradient(-90deg, rgba(255, 255, 255, 0), rgb(255, 255, 255));
}
.dp-img img {
object-fit: cover;
object-position: right;
}
#dp-slider,
.dp-img img {
height: 738px;
}
#dp-slider .dp_item:hover:not(:first-child) {
cursor: pointer;
}
.site-btn {
color: #fff;
font-size: 18px;
font-family: "Circular Std Medium";
background: #FA8282;
padding: 14px 43px;
display: inline-block;
border-radius: 2px;
position: relative;
top: -12px;
text-decoration: none;
}
.site-btn:hover{
text-decoration: none;
color: #fff;
}
h1 { margin: 150px auto 30px auto; text-align: center; }<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container" style="max-width: 1400px; margin: 0 auto;">
<div id="slider">
<div class="dp-wrap">
<div id="dp-slider">
<div class="dp_item" data-class="1" data-position="1">
<div class="dp-content">
<h2>Slide 1</h2>
<p> This is Slide 1 </p>
<a href="#" class="site-btn">Read More…</a>
</div>
<div class="dp-img">
<img class="img-fluid" src="https://placeimg.com/821/739/any" alt="investing">
</div>
</div>
<div class="dp_item" data-class="2" data-position="2">
<div class="dp-content">
<h2>Slide 2</h2>
<p> This is Slide 2 </p>
<a href="#" class="site-btn">Read More…</a>
</div>
<div class="dp-img">
<img class="img-fluid" src="https://placeimg.com/821/738/any" alt="investing">
</div>
</div>
<div class="dp_item" data-class="3" data-position="3">
<div class="dp-content">
<h2>Slide 3</h2>
<p> This is Slide 3 </p>
<a href="#" class="site-btn">Read More…</a>
</div>
<div class="dp-img">
<img class="img-fluid" src="https://placeimg.com/821/737/any" alt="investing">
</div>
</div>
<div class="dp_item" data-class="4" data-position="4">
<div class="dp-content">
<h2>Slide 4</h2>
<p> This is Slide 4 </p>
<a href="#" class="site-btn">Read More…</a>
</div>
<div class="dp-img">
<img class="img-fluid" src="https://placeimg.com/821/736/any" alt="investing">
</div>
</div>
</div>
<span class="dp-next">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 51.401 51.401">
<defs>
<style>
.cls-1 {
fill: none;
stroke: #fa8c8c;
stroke-miterlimit: 10;
stroke-width: 7px;
}
</style>
</defs>
<path id="Rectangle_4_Copy" data-name="Rectangle 4 Copy" class="cls-1" d="M32.246,0V33.178L0,31.953" transform="translate(0.094 25.276) rotate(-45)"/>
</svg>
</span>
<span class="dp-prev">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 51.401 51.401">
<defs>
<style>
.cls-1 {
fill: none;
stroke: #fa8c8c;
stroke-miterlimit: 10;
stroke-width: 7px;
}
</style>
</defs>
<path id="Rectangle_4_Copy" data-name="Rectangle 4 Copy" class="cls-1" d="M32.246,0V33.178L0,31.953" transform="translate(0.094 25.276) rotate(-45)"/>
</svg>
</span>
<ul class="dp-dots">
<li data-class="1" class="active"></li>
<li data-class="2"></li>
<li data-class="3"></li>
<li data-class="4"></li>
</ul>
</div>
</div>
</div>
<div class="container" style="max-width: 1400px; margin: 0 auto;">
<div id="slider">
<div class="dp-wrap">
<div id="dp-slider">
<div class="dp_item" data-class="1" data-position="1">
<div class="dp-content">
<h2>Slide 1</h2>
<p> This is Slide 1 </p>
<a href="#" class="site-btn">Read More…</a>
</div>
<div class="dp-img">
<img class="img-fluid" src="https://placeimg.com/821/739/any" alt="investing">
</div>
</div>
<div class="dp_item" data-class="2" data-position="2">
<div class="dp-content">
<h2>Slide 2</h2>
<p> This is Slide 2 </p>
<a href="#" class="site-btn">Read More…</a>
</div>
<div class="dp-img">
<img class="img-fluid" src="https://placeimg.com/821/738/any" alt="investing">
</div>
</div>
<div class="dp_item" data-class="3" data-position="3">
<div class="dp-content">
<h2>Slide 3</h2>
<p> This is Slide 3 </p>
<a href="#" class="site-btn">Read More…</a>
</div>
<div class="dp-img">
<img class="img-fluid" src="https://placeimg.com/821/737/any" alt="investing">
</div>
</div>
<div class="dp_item" data-class="4" data-position="4">
<div class="dp-content">
<h2>Slide 4</h2>
<p> This is Slide 4 </p>
<a href="#" class="site-btn">Read More…</a>
</div>
<div class="dp-img">
<img class="img-fluid" src="https://placeimg.com/821/736/any" alt="investing">
</div>
</div>
</div>
<span class="dp-next">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 51.401 51.401">
<defs>
<style>
.cls-1 {
fill: none;
stroke: #fa8c8c;
stroke-miterlimit: 10;
stroke-width: 7px;
}
</style>
</defs>
<path id="Rectangle_4_Copy" data-name="Rectangle 4 Copy" class="cls-1" d="M32.246,0V33.178L0,31.953" transform="translate(0.094 25.276) rotate(-45)"/>
</svg>
</span>
<span class="dp-prev">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 51.401 51.401">
<defs>
<style>
.cls-1 {
fill: none;
stroke: #fa8c8c;
stroke-miterlimit: 10;
stroke-width: 7px;
}
</style>
</defs>
<path id="Rectangle_4_Copy" data-name="Rectangle 4 Copy" class="cls-1" d="M32.246,0V33.178L0,31.953" transform="translate(0.094 25.276) rotate(-45)"/>
</svg>
</span>
<ul class="dp-dots">
<li data-class="1" class="active"></li>
<li data-class="2"></li>
<li data-class="3"></li>
<li data-class="4"></li>
</ul>
</div>
</div>
</div>
<div class="container" style="max-width: 1400px; margin: 0 auto;">
<div id="slider">
<div class="dp-wrap">
<div id="dp-slider">
<div class="dp_item" data-class="1" data-position="1">
<div class="dp-content">
<h2>Slide 1</h2>
<p> This is Slide 1 </p>
<a href="#" class="site-btn">Read More…</a>
</div>
<div class="dp-img">
<img class="img-fluid" src="https://placeimg.com/821/739/any" alt="investing">
</div>
</div>
<div class="dp_item" data-class="2" data-position="2">
<div class="dp-content">
<h2>Slide 2</h2>
<p> This is Slide 2 </p>
<a href="#" class="site-btn">Read More…</a>
</div>
<div class="dp-img">
<img class="img-fluid" src="https://placeimg.com/821/738/any" alt="investing">
</div>
</div>
<div class="dp_item" data-class="3" data-position="3">
<div class="dp-content">
<h2>Slide 3</h2>
<p> This is Slide 3 </p>
<a href="#" class="site-btn">Read More…</a>
</div>
<div class="dp-img">
<img class="img-fluid" src="https://placeimg.com/821/737/any" alt="investing">
</div>
</div>
<div class="dp_item" data-class="4" data-position="4">
<div class="dp-content">
<h2>Slide 4</h2>
<p> This is Slide 4 </p>
<a href="#" class="site-btn">Read More…</a>
</div>
<div class="dp-img">
<img class="img-fluid" src="https://placeimg.com/821/736/any" alt="investing">
</div>
</div>
</div>
<span class="dp-next">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 51.401 51.401">
<defs>
<style>
.cls-1 {
fill: none;
stroke: #fa8c8c;
stroke-miterlimit: 10;
stroke-width: 7px;
}
</style>
</defs>
<path id="Rectangle_4_Copy" data-name="Rectangle 4 Copy" class="cls-1" d="M32.246,0V33.178L0,31.953" transform="translate(0.094 25.276) rotate(-45)"/>
</svg>
</span>
<span class="dp-prev">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 51.401 51.401">
<defs>
<style>
.cls-1 {
fill: none;
stroke: #fa8c8c;
stroke-miterlimit: 10;
stroke-width: 7px;
}
</style>
</defs>
<path id="Rectangle_4_Copy" data-name="Rectangle 4 Copy" class="cls-1" d="M32.246,0V33.178L0,31.953" transform="translate(0.094 25.276) rotate(-45)"/>
</svg>
</span>
<ul class="dp-dots">
<li data-class="1" class="active"></li>
<li data-class="2"></li>
<li data-class="3"></li>
<li data-class="4"></li>
</ul>
</div>
</div>
</div>