I am sharing the HTML content of my test page that I am looking to customize similar to some websites I have come across. My goal is to create a rotating div with an unordered list (ul li), where only three divs are displayed at a time while the rest remain hidden. The hidden divs should be visible when clicking on the left or right rotation link.
For example, you can check out:
The new product list on this site: www.mysmarttrip.in
The featured deal list on this site:
I've attempted to replicate this functionality but my CSS and Javascript knowledge is limited. I'm seeking assistance from someone who can help me bring my page design in line with the examples shared above.
Thank you in advance for any assistance provided.
Here is the layout of my HTML page:
<html>
<head>
<style type="text/css">
.product_head {
overflow: hidden;
width: 703px;
height: 35px;
padding: 0px;
position: relative;
border: 1px solid rgb(141, 196, 120);
font-family: verdana,geneva,Arial,helvetica,sans-serif;
font-size: 12px;
font-weight: bold;
border-radius: 5px;
text-align: center;
display: table-cell;
vertical-align: middle;
background-color: #27638C;
}
.product_page_box {
overflow: hidden;
width: 204px;
height: 250px;
padding: 0px;
margin: 2px 10px 5px 2px;
float: left;
position: relative;
border: 1px solid rgb(141, 196, 120);
font-family: verdana,geneva,Arial,helvetica,sans-serif;
font-size: 12px;
font-weight: bold;
border-radius: 5px;
}
.product_head .product_page_box ol, ul {
list-style: none;
}
.product_container_head {
width: 204px;
height: 25px;
background-color: rgb(234, 248, 228);
padding: 10px;
text-align: center;
display: table-cell;
vertical-align: middle;
}
.product_container_head a {
color: #27638C;
text-transform: uppercase;
}
.product_details {
width: 172px;
height: 25px;
vertical-align: middle;
text-align: center;
padding: 20px 10px 10px 0;
position: relative;
margin: 10px;
border: 1px solid rgb(141, 196, 120);
cursor: pointer;
}
</style>
</head>
<body>
<div>
<div class="product_head">
<p> Main Title </p>
</div>
<div>
<ul>
<li>
<div class="product_page_box">
<div class="product_container_head">
AA Title </div>
<div class="product_details">
AA 1 </div>
<div class="product_details">
AA 2 </div>
<div class="product_details">
AA 3 </div>
</div>
</li>
<li>
<div class="product_page_box">
<div class="product_container_head">
BB Title </div>
<div class="product_details">
BB 1 </div>
<div class="product_details">
BB 2 </div>
<div class="product_details">
BB 3 </div>
</div>
</li>
<li>
<div class="product_page_box">
<div class="product_container_head">
CC Title </div>
<div class="product_details">
CC 1 </div>
<div class="product_details">
CC 2 </div>
<div class="product_details">
CC 3 </div>
</div>
</li>
<li>
<div class="product_page_box">
<div class="product_container_head">
DD Title </div>
<div class="product_details">
DD 1 </div>
<div class="product_details">
DD 2 </div>
<div class="product_details">
DD 3 </div>
</div>
</li>
<li>
<div class="product_page_box">
<div class="product_container_head">
EE Title </div>
<div class="product_details">
EE 1 </div>
<div class="product_details">
EE 2 </div>
<div class="product_details">
EE 3 </div>
</div>
</li>
</ul>
</div>
</div>
</body>
</html>