Horizontal product card div slider not working - html

Question

I created this product card slider but it's prev and nex buttons are not working. Also I tried some other ways but it affect my product card structure. So please, If there is any easy way to do this which does not affect my card structure it will be helpfull.
.container{
padding:80px 7%;
position: relative;
font-family: 'Open Sans', sans-serif;
}
.details{
display: flex;
justify-content: space-between;
margin: 20px 0px 30px 0px;
color: white;
}
.right{
max-width: 50%;
}
.container .box-container .box{
box-shadow: 0 5px 10px rgba(0,0,0,.3);
background:#0d1b2a;
padding:15px;
margin: 40px 0;
display: flex;
align-items: center;
flex-wrap: wrap;
gap:15px;
}
.container .box-container .box .image-container{
flex:1 1 500px;
display: flex;
align-items: center;
gap:15px;
}
.container .box-container .box .content{
flex:1 1 350px;
}
.container .box-container .box .image-container .small-image{
width:20%;
}
.container .box-container .box .image-container .big-image{
width:80%;
}
.container .box-container .box .image-container .small-image img{
width:100%;
padding:10px;
border:1px solid rgba(255, 255, 255, 0.3);
cursor: pointer;
}
.container .box-container .box .image-container .small-image img:hover{
background:rgba(167, 167, 167, 0.2);
}
.container .box-container .box .image-container .big-image img{
width:95%;
padding:20px;
filter: drop-shadow(0 5px 10px rgba(0,0,0,.2));
}
.container .box-container .box .content h3{
color:rgb(255, 255, 255);
font-size: 25px;
}
.hide-1{
background-color: transparent;
padding: 5px 10px;
border: 1px solid rgb(255, 255, 255);
color: rgb(255, 255, 255);
}
.product{
height: 100vh;
}
#media only screen and (max-width: 370px) {
.details{
flex-direction: column ;
}
.hide-1{
font-size: .8em;
}
}
/* --------------------------------------- */
html,
body {
height: 100%;
margin: 0px;
}
.slider {
width: 100%;
border-radius: 20px;
overflow: hidden;
}
.slides {
display: flex;
overflow-x: scroll;
position: relative;
scroll-behavior: smooth;
scroll-snap-type: x mandatory;
}
.slide:nth-of-type(even) {
background-color: rgb(250, 246, 212);
}
.slide {
display: flex;
justify-content: center;
align-items: center;
flex-shrink: 0;
width: 100%;
height: 400px;
scroll-snap-align: center;
margin-right: 0px;
box-sizing: border-box;
background: white;
transform-origin: center center;
transform: scale(1);
}
.slide__text {
font-size: 40px;
font-weight: bold;
font-family: sans-serif;
}
.slide a {
background: none;
border: none;
}
a.slide__prev,
.slider::before {
transform: rotate(135deg);
-webkit-transform: rotate(135deg);
left: 2%;
}
a.slide__next,
.slider::after {
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
right: 2%;
}
.slider::before,
.slider::after,
.slide__prev,
.slide__next {
position: absolute;
top: 48%;
width: 35px;
height: 35px;
border: solid black;
border-width: 0 4px 4px 0;
padding: 3px;
box-sizing: border-box;
}
.slider::before,
.slider::after {
content: "";
z-index: 1;
background: none;
pointer-events: none;
}
.slider__nav {
box-sizing: border-box;
position: absolute;
bottom: 5%;
left: 50%;
width: 200px;
margin-left: -100px;
text-align: center;
}
.slider__navlink {
display: inline-block;
height: 15px;
width: 15px;
border-radius: 50%;
background-color: black;
margin: 0 10px 0 10px;
}
.read-article{
position: absolute;
top: 10px;
left: 10px;
z-index: 999;
color: #000;
background: white;
padding: 10px 20px;
border-radius: 10px;
font-family: arial;
text-decoration: none;
box-shadow: rgb(50 50 93 / 25%) 0 0 100px -20px, rgb(0 0 0 / 30%) 0 0 60px -15px;
}
.read-article:hover{
background: #d5d5d5;
box-shadow: rgb(50 50 93 / 25%) 0 0 100px -20px, rgb(0 0 0 / 30%) 0 0 60px 0px;
}
iframe[sandbox] .read-article{
display: none;
}
<div class="container slider-container">
<div class="box-container slider">
<div class="slides">
<div class="box slide" id="slides__1">
<div class="image-container">
<div class="small-image">
<img src="images/image_11.png" class="small-img-1" alt="">
<img src="images/image_12.png" class="small-img-1" alt="">
<img src="images/image_13.png" class="small-img-1" alt="">
<img src="images/image_14.png" class="small-img-1" alt="">
</div>
<div class="big-image">
<img src="images/image_11.png" class="big-img-1" alt="">
</div>
</div>
<div class="content">
<h3>Phillips</h3>
<div class="details">
<div class="left">
<p>ID: Mp2223-0</p>
<p>Modality: CT</p>
<p>Model: Ingenuity</p>
<p>YOM: 2016</p>
</div>
<div class="right">
<p>Slice: 128</p>
<p>Origin: UAE</p>
<p>Remark: System In Good Working Condition</p>
</div>
</div>
To Know more Call #8766474892
</div>
<a class="slide__prev" href="#slides__4" title="Prev"></a>
<a class="slide__next" href="#slides__2" title="Next"></a>
</div>
<div class="box slide" id="slides__2">
<div class="image-container">
<div class="small-image">
<img src="images/image_11.png" class="small-img-2" alt="">
<img src="images/image_12.png" class="small-img-2" alt="">
<img src="images/image_13.png" class="small-img-2" alt="">
<img src="images/image_14.png" class="small-img-2" alt="">
</div>
<div class="big-image">
<img src="images/image_11.png" class="big-img-2" alt="">
</div>
</div>
<div class="content">
<h3>Phillips</h3>
<div class="details">
<div class="left">
<p>ID: Mp2223-0</p>
<p>Modality: CT</p>
<p>Model: Ingenuity</p>
<p>YOM: 2016</p>
</div>
<div class="right">
<p>Slice: 128</p>
<p>Origin: UAE</p>
<p>Remark: System In Good Working Condition</p>
</div>
</div>
To Know more Call #8766474892
</div>
<a class="slide__prev" href="#slides__1" title="Prev"></a>
<a class="slide__next" href="#slides__3" title="Next"></a>
</div>
<div class="box slide" id="slides__3">
<div class="image-container">
<div class="small-image">
<img src="images/image_11.png" class="small-img-3" alt="">
<img src="images/image_12.png" class="small-img-3" alt="">
<img src="images/image_13.png" class="small-img-3" alt="">
<img src="images/image_14.png" class="small-img-3" alt="">
</div>
<div class="big-image">
<img src="images/image_11.png" class="big-img-3" alt="">
</div>
</div>
<div class="content">
<h3>Phillips</h3>
<div class="details">
<div class="left">
<p>ID: Mp2223-0</p>
<p>Modality: CT</p>
<p>Model: Ingenuity</p>
<p>YOM: 2016</p>
</div>
<div class="right">
<p>Slice: 128</p>
<p>Origin: UAE</p>
<p>Remark: System In Good Working Condition</p>
</div>
</div>
To Know more Call #8766474892
</div>
<a class="slide__prev" href="#slides__2" title="Prev"></a>
<a class="slide__next" href="#slides__4" title="Next"></a>
</div>
<div class="box slide" id="slides__4">
<div class="image-container">
<div class="small-image">
<img src="images/image_21.png" class="small-img-4" alt="">
<img src="images/image_22.png" class="small-img-4" alt="">
<img src="images/image_23.png" class="small-img-4" alt="">
<img src="images/image_24.png" class="small-img-4" alt="">
</div>
<div class="big-image">
<img src="images/image_11.png" class="big-img-4" alt="">
</div>
</div>
<div class="content">
<h3>Phillips</h3>
<div class="details">
<div class="left">
<p>ID: Mp2223-0</p>
<p>Modality: CT</p>
<p>Model: Ingenuity</p>
<p>YOM: 2016</p>
</div>
<div class="right">
<p>Slice: 128</p>
<p>Origin: UAE</p>
<p>Remark: System In Good Working Condition</p>
</div>
</div>
To Know more Call #8766474892
</div>
<a class="slide__prev" href="#slides__3" title="Prev"></a>
<a class="slide__next" href="#slides__1" title="Next"></a>
</div>
</div>
<div class="slider__nav">
<a class="slider__navlink" href="#slides__1"></a>
<a class="slider__navlink" href="#slides__2"></a>
<a class="slider__navlink" href="#slides__3"></a>
<a class="slider__navlink" href="#slides__4"></a>
</div>
</div>
</div>
Also I want to optimize my code so if it is possible let me know.
Thanks in advance.

Answer 1

You can use scrollIntoView() and based on the index of the slide which is currently in view ,the next and previous button will respond correctly.
Check the snippet below
var next=document.getElementsByClassName('slide__next')[0];
var prev=document.getElementsByClassName('slide__prev')[0];
var length= document.getElementsByClassName('slide').length;
var width_slide=document.getElementsByClassName('slides')[0].clientWidth;
var i=0,j=1;
var active=document.getElementsByClassName('active')[0];
var slide=Array.from(document.getElementsByClassName('slide'));
document.getElementsByClassName('slide')[0].classList.add('active');
next.addEventListener('click',function(){
let index=Array.from(document.getElementsByClassName('slide')).indexOf(document.getElementsByClassName('active')[0]);
if(index<(length-1))
{
document.getElementsByClassName('slide')[index].classList.remove('active');
document.getElementsByClassName('slide')[index+1].classList.add('active');
}
document.getElementsByClassName('active')[0].scrollIntoView();
})
prev.addEventListener('click',function(){
let index=Array.from(document.getElementsByClassName('slide')).indexOf(document.getElementsByClassName('active')[0]);
if(index>0)
{
document.getElementsByClassName('slide')[index].classList.remove('active');
document.getElementsByClassName('slide')[index-1].classList.add('active');
}
document.getElementsByClassName('active')[0].scrollIntoView();
})
.container{
padding:80px 7%;
position: relative;
font-family: 'Open Sans', sans-serif;
}
.details{
display: flex;
justify-content: space-between;
margin: 20px 0px 30px 0px;
color: white;
}
.right{
max-width: 50%;
}
.container .box-container .box{
box-shadow: 0 5px 10px rgba(0,0,0,.3);
background:#0d1b2a;
padding:15px;
margin: 40px 0;
display: flex;
align-items: center;
flex-wrap: wrap;
gap:15px;
}
.container .box-container .box .image-container{
flex:1 1 500px;
display: flex;
align-items: center;
gap:15px;
}
.container .box-container .box .content{
flex:1 1 350px;
}
.container .box-container .box .image-container .small-image{
width:20%;
}
.container .box-container .box .image-container .big-image{
width:80%;
}
.container .box-container .box .image-container .small-image img{
width:100%;
padding:10px;
border:1px solid rgba(255, 255, 255, 0.3);
cursor: pointer;
}
.container .box-container .box .image-container .small-image img:hover{
background:rgba(167, 167, 167, 0.2);
}
.container .box-container .box .image-container .big-image img{
width:95%;
padding:20px;
filter: drop-shadow(0 5px 10px rgba(0,0,0,.2));
}
.container .box-container .box .content h3{
color:rgb(255, 255, 255);
font-size: 25px;
}
.hide-1{
background-color: transparent;
padding: 5px 10px;
border: 1px solid rgb(255, 255, 255);
color: rgb(255, 255, 255);
}
.product{
height: 100vh;
}
#media only screen and (max-width: 370px) {
.details{
flex-direction: column ;
}
.hide-1{
font-size: .8em;
}
}
/* --------------------------------------- */
html,
body {
height: 100%;
margin: 0px;
}
.slider {
width: 100%;
border-radius: 20px;
overflow: hidden;
}
.slides {
display: flex;
overflow-x: scroll;
position: relative;
scroll-behavior: smooth;
scroll-snap-type: x mandatory;
}
.slide:nth-of-type(even) {
background-color: rgb(250, 246, 212);
}
.slide {
display: flex;
justify-content: center;
align-items: center;
flex-shrink: 0;
width: 100%;
height: 400px;
scroll-snap-align: center;
margin-right: 0px;
box-sizing: border-box;
background: white;
transform-origin: center center;
transform: scale(1);
}
.slide__text {
font-size: 40px;
font-weight: bold;
font-family: sans-serif;
}
.slide a {
background: none;
border: none;
}
a.slide__prev,
.slider::before {
transform: rotate(135deg);
-webkit-transform: rotate(135deg);
left: 2%;
}
a.slide__next,
.slider::after {
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
right: 2%;
}
.slider::before,
.slider::after,
.slide__prev,
.slide__next {
position: absolute;
top: 48%;
width: 35px;
height: 35px;
border: solid black;
border-width: 0 4px 4px 0;
padding: 3px;
box-sizing: border-box;
}
.slider::before,
.slider::after {
content: "";
z-index: 1;
background: none;
pointer-events: none;
}
.slider__nav {
box-sizing: border-box;
position: absolute;
bottom: 5%;
left: 50%;
width: 200px;
margin-left: -100px;
text-align: center;
}
.slider__navlink {
display: inline-block;
height: 15px;
width: 15px;
border-radius: 50%;
background-color: black;
margin: 0 10px 0 10px;
}
.read-article{
position: absolute;
top: 10px;
left: 10px;
z-index: 999;
color: #000;
background: white;
padding: 10px 20px;
border-radius: 10px;
font-family: arial;
text-decoration: none;
box-shadow: rgb(50 50 93 / 25%) 0 0 100px -20px, rgb(0 0 0 / 30%) 0 0 60px -15px;
}
.read-article:hover{
background: #d5d5d5;
box-shadow: rgb(50 50 93 / 25%) 0 0 100px -20px, rgb(0 0 0 / 30%) 0 0 60px 0px;
}
iframe[sandbox] .read-article{
display: none;
}
<div class="container slider-container">
<div class="box-container slider">
<a class="slide__prev" href="#/" title="Prev"></a>
<a class="slide__next" href="#/" title="Next"></a>
<div class="slides check">
<div class="box slide" id="slides__1">
<div class="image-container">
<div class="small-image">
<img src="images/image_11.png" class="small-img-1" alt="">
<img src="images/image_12.png" class="small-img-1" alt="">
<img src="images/image_13.png" class="small-img-1" alt="">
<img src="images/image_14.png" class="small-img-1" alt="">
</div>
<div class="big-image">
<img src="images/image_11.png" class="big-img-1" alt="">
</div>
</div>
<div class="content">
<h3>Phillips</h3>
<div class="details">
<div class="left">
<p>ID: Mp2223-0</p>
<p>Modality: CT</p>
<p>Model: Ingenuity</p>
<p>YOM: 2016</p>
</div>
<div class="right">
<p>Slice: 128</p>
<p>Origin: UAE</p>
<p>Remark: System In Good Working Condition</p>
</div>
</div>
To Know more Call #8766474892
</div>
</div>
<div class="box slide" id="slides__2">
<div class="image-container">
<div class="small-image">
<img src="images/image_11.png" class="small-img-2" alt="">
<img src="images/image_12.png" class="small-img-2" alt="">
<img src="images/image_13.png" class="small-img-2" alt="">
<img src="images/image_14.png" class="small-img-2" alt="">
</div>
<div class="big-image">
<img src="images/image_11.png" class="big-img-2" alt="">
</div>
</div>
<div class="content">
<h3>Phillips</h3>
<div class="details">
<div class="left">
<p>ID: Mp2223-0</p>
<p>Modality: CT</p>
<p>Model: Ingenuity</p>
<p>YOM: 2016</p>
</div>
<div class="right">
<p>Slice: 128</p>
<p>Origin: UAE</p>
<p>Remark: System In Good Working Condition</p>
</div>
</div>
To Know more Call #8766474892
</div>
</div>
<div class="box slide" id="slides__3">
<div class="image-container">
<div class="small-image">
<img src="images/image_11.png" class="small-img-3" alt="">
<img src="images/image_12.png" class="small-img-3" alt="">
<img src="images/image_13.png" class="small-img-3" alt="">
<img src="images/image_14.png" class="small-img-3" alt="">
</div>
<div class="big-image">
<img src="images/image_11.png" class="big-img-3" alt="">
</div>
</div>
<div class="content">
<h3>Phillips</h3>
<div class="details">
<div class="left">
<p>ID: Mp2223-0</p>
<p>Modality: CT</p>
<p>Model: Ingenuity</p>
<p>YOM: 2016</p>
</div>
<div class="right">
<p>Slice: 128</p>
<p>Origin: UAE</p>
<p>Remark: System In Good Working Condition</p>
</div>
</div>
To Know more Call #8766474892
</div>
</div>
<div class="box slide" id="slides__4">
<div class="image-container">
<div class="small-image">
<img src="images/image_21.png" class="small-img-4" alt="">
<img src="images/image_22.png" class="small-img-4" alt="">
<img src="images/image_23.png" class="small-img-4" alt="">
<img src="images/image_24.png" class="small-img-4" alt="">
</div>
<div class="big-image">
<img src="images/image_11.png" class="big-img-4" alt="">
</div>
</div>
<div class="content">
<h3>Phillips</h3>
<div class="details">
<div class="left">
<p>ID: Mp2223-0</p>
<p>Modality: CT</p>
<p>Model: Ingenuity</p>
<p>YOM: 2016</p>
</div>
<div class="right">
<p>Slice: 128</p>
<p>Origin: UAE</p>
<p>Remark: System In Good Working Condition</p>
</div>
</div>
To Know more Call #8766474892
</div>
</div>
</div>
<div class="slider__nav">
<a class="slider__navlink" href="#slides__1"></a>
<a class="slider__navlink" href="#slides__2"></a>
<a class="slider__navlink" href="#slides__3"></a>
<a class="slider__navlink" href="#slides__4"></a>
</div>
</div>
</div>

Answer 2

The main problem is that the slides div have an overflow-x:scroll , which keeps the previous/next links inside the container while your arrow icons are on the outside, so when you click on them you don't click on the link at all.
Also it is not a good practice to have many previous/next links, you only need one.
This is what I updated
Added simple dynamic js function to handle prev/next clicks
Update a.slider prev/next styles including before/after
Previous/next links moved to to the box-container
Note: I didn't hide the next arrow icon when it is the last slide or hide the prev arrow icon when it is the first slide, but you can add it easily.
function nextPrev(type) {
const slides = document.querySelector(".slides");
const slideWidth = document.querySelector(".slide").offsetWidth;
const scrolLeft =
slides.scrollLeft + (type === "next" ? slideWidth : -slideWidth);
slides.scrollTo({
left: scrolLeft,
behavior: "smooth",
});
}
.container {
padding: 80px 7%;
position: relative;
font-family: "Open Sans", sans-serif;
}
.details {
display: flex;
justify-content: space-between;
margin: 20px 0px 30px 0px;
color: white;
}
.right {
max-width: 50%;
}
.container .box-container .box {
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
background: #0d1b2a;
padding: 15px;
margin: 40px 0;
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 15px;
}
.container .box-container .box .image-container {
flex: 1 1 500px;
display: flex;
align-items: center;
gap: 15px;
}
.container .box-container .box .content {
flex: 1 1 350px;
}
.container .box-container .box .image-container .small-image {
width: 20%;
}
.container .box-container .box .image-container .big-image {
width: 80%;
}
.container .box-container .box .image-container .small-image img {
width: 100%;
padding: 10px;
border: 1px solid rgba(255, 255, 255, 0.3);
cursor: pointer;
}
.container .box-container .box .image-container .small-image img:hover {
background: rgba(167, 167, 167, 0.2);
}
.container .box-container .box .image-container .big-image img {
width: 95%;
padding: 20px;
filter: drop-shadow(0 5px 10px rgba(0, 0, 0, 0.2));
}
.container .box-container .box .content h3 {
color: rgb(255, 255, 255);
font-size: 25px;
}
.hide-1 {
background-color: transparent;
padding: 5px 10px;
border: 1px solid rgb(255, 255, 255);
color: rgb(255, 255, 255);
}
.product {
height: 100vh;
}
#media only screen and (max-width: 370px) {
.details {
flex-direction: column;
}
.hide-1 {
font-size: 0.8em;
}
}
/* --------------------------------------- */
html,
body {
height: 100%;
margin: 0px;
}
.slider {
width: 100%;
border-radius: 20px;
overflow: hidden;
}
.slides {
display: flex;
overflow-x: scroll;
position: relative;
scroll-behavior: smooth;
scroll-snap-type: x mandatory;
}
.slide:nth-of-type(even) {
background-color: rgb(250, 246, 212);
}
.slide {
display: flex;
justify-content: center;
align-items: center;
flex-shrink: 0;
width: 100%;
height: 400px;
scroll-snap-align: center;
margin-right: 0px;
box-sizing: border-box;
background: white;
transform-origin: center center;
transform: scale(1);
}
.slide__text {
font-size: 40px;
font-weight: bold;
font-family: sans-serif;
}
.slide a {
background: none;
border: none;
}
a.slide__prev,
a.slide__next {
position: absolute;
border: solid black;
border-width: 0 4px 4px 0;
top: 48%;
width: 35px;
height: 35px;
}
a.slide__prev {
transform: rotate(135deg);
-webkit-transform: rotate(135deg);
left: 2%;
}
a.slide__next {
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
right: 2%;
}
.slider::before,
.slider::after {
content: "";
z-index: 1;
background: none;
pointer-events: none;
}
.slider__nav {
box-sizing: border-box;
position: absolute;
bottom: 5%;
left: 50%;
width: 200px;
margin-left: -100px;
text-align: center;
}
.slider__navlink {
display: inline-block;
height: 15px;
width: 15px;
border-radius: 50%;
background-color: black;
margin: 0 10px 0 10px;
}
.read-article {
position: absolute;
top: 10px;
left: 10px;
z-index: 999;
color: #000;
background: white;
padding: 10px 20px;
border-radius: 10px;
font-family: arial;
text-decoration: none;
box-shadow: rgb(50 50 93 / 25%) 0 0 100px -20px,
rgb(0 0 0 / 30%) 0 0 60px -15px;
}
.read-article:hover {
background: #d5d5d5;
box-shadow: rgb(50 50 93 / 25%) 0 0 100px -20px,
rgb(0 0 0 / 30%) 0 0 60px 0px;
}
iframe[sandbox] .read-article {
display: none;
}
<div class="container slider-container">
<div class="box-container slider">
<div class="slides">
<div class="box slide" id="slides__1">
<div class="image-container">
<div class="small-image">
<img src="images/image_11.png" class="small-img-1" alt="" />
<img src="images/image_12.png" class="small-img-1" alt="" />
<img src="images/image_13.png" class="small-img-1" alt="" />
<img src="images/image_14.png" class="small-img-1" alt="" />
</div>
<div class="big-image">
<img src="images/image_11.png" class="big-img-1" alt="" />
</div>
</div>
<div class="content">
<h3>Phillips</h3>
<div class="details">
<div class="left">
<p>ID: Mp2223-0</p>
<p>Modality: CT</p>
<p>Model: Ingenuity</p>
<p>YOM: 2016</p>
</div>
<div class="right">
<p>Slice: 128</p>
<p>Origin: UAE</p>
<p>Remark: System In Good Working Condition</p>
</div>
</div>
To Know more Call #8766474892
</div>
</div>
<div class="box slide" id="slides__2">
<div class="image-container">
<div class="small-image">
<img src="images/image_11.png" class="small-img-2" alt="" />
<img src="images/image_12.png" class="small-img-2" alt="" />
<img src="images/image_13.png" class="small-img-2" alt="" />
<img src="images/image_14.png" class="small-img-2" alt="" />
</div>
<div class="big-image">
<img src="images/image_11.png" class="big-img-2" alt="" />
</div>
</div>
<div class="content">
<h3>Phillips</h3>
<div class="details">
<div class="left">
<p>ID: Mp2223-0</p>
<p>Modality: CT</p>
<p>Model: Ingenuity</p>
<p>YOM: 2016</p>
</div>
<div class="right">
<p>Slice: 128</p>
<p>Origin: UAE</p>
<p>Remark: System In Good Working Condition</p>
</div>
</div>
To Know more Call #8766474892
</div>
</div>
<div class="box slide" id="slides__3">
<div class="image-container">
<div class="small-image">
<img src="images/image_11.png" class="small-img-3" alt="" />
<img src="images/image_12.png" class="small-img-3" alt="" />
<img src="images/image_13.png" class="small-img-3" alt="" />
<img src="images/image_14.png" class="small-img-3" alt="" />
</div>
<div class="big-image">
<img src="images/image_11.png" class="big-img-3" alt="" />
</div>
</div>
<div class="content">
<h3>Phillips</h3>
<div class="details">
<div class="left">
<p>ID: Mp2223-0</p>
<p>Modality: CT</p>
<p>Model: Ingenuity</p>
<p>YOM: 2016</p>
</div>
<div class="right">
<p>Slice: 128</p>
<p>Origin: UAE</p>
<p>Remark: System In Good Working Condition</p>
</div>
</div>
To Know more Call #8766474892
</div>
</div>
<div class="box slide" id="slides__4">
<div class="image-container">
<div class="small-image">
<img src="images/image_21.png" class="small-img-4" alt="" />
<img src="images/image_22.png" class="small-img-4" alt="" />
<img src="images/image_23.png" class="small-img-4" alt="" />
<img src="images/image_24.png" class="small-img-4" alt="" />
</div>
<div class="big-image">
<img src="images/image_11.png" class="big-img-4" alt="" />
</div>
</div>
<div class="content">
<h3>Phillips</h3>
<div class="details">
<div class="left">
<p>ID: Mp2223-0</p>
<p>Modality: CT</p>
<p>Model: Ingenuity</p>
<p>YOM: 2016</p>
</div>
<div class="right">
<p>Slice: 128</p>
<p>Origin: UAE</p>
<p>Remark: System In Good Working Condition</p>
</div>
</div>
To Know more Call #8766474892
</div>
</div>
</div>
<a
class="slide__prev"
href="javascript:void(0);"
onclick="nextPrev('prev')"
title="Prev"
></a>
<a
class="slide__next"
href="javascript:void(0);"
onclick="nextPrev('next')"
title="Next"
></a>
<div class="slider__nav">
<a class="slider__navlink" href="#slides__1"></a>
<a class="slider__navlink" href="#slides__2"></a>
<a class="slider__navlink" href="#slides__3"></a>
<a class="slider__navlink" href="#slides__4"></a>
</div>
</div>
</div>