Looking for assistance in creating an html page with a rotating CSS div containing unordered lists and list items

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>

Answer №1

Try implementing a jQuery plugin like the one available at or another option can be found at

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

There is no need for updates as git is already current for some mysterious reason

As a newcomer to git, I've been trying to wrap my head around it but still struggling. Can someone help clarify this for me? My question pertains to the 'master' branch in git which contains the following code: const list = [ 'h&ap ...

I am looking to extract specific data from a webpage using Webscraping and page_soup.findAll, but I am unsure of the correct method to do

I'm currently working on a web scraping project and I'm trying to extract the keywords from a webpage. I attempted to use page_soup.findAll() for extraction, but I'm unsure of what to include between the parentheses to get the desired inform ...

Loading Ajax causes the content to duplicate

My website is created using Wordpress as the CMS with an index featuring a long accordion-style list of post titles. Clicking on a heading loads the content for that post via Ajax onto the index page. However, I am encountering an issue where clicking a h ...

Inconsistent rendering issue identified in AngularJS when updating arrays with ui-router

I'm leveraging ui-router to navigate to specific subpages in my application: var myApp = angular.module("myApp",['ui.router']); myApp.config(function($stateProvider, $urlRouterProvider) { $stateProvider .state('usergroups&apos ...

JavaScript watermark with alternating/dual mode

In the following code snippet, I have implemented a function to make window.status switch between displaying "a" and "b." function alternateViaIntrvl() { setInterval('alterStatus()', 500); } var altrCounter = 0; function alerted() { var ...

Storing JavaScript arrays in CSV format on the server

I am currently facing an issue while trying to save a multidimensional Javascript array as a CSV file on the server. Despite my efforts, the CSV file created does not seem to contain the actual array data, and I am unsure of what is causing this discrepanc ...

The validation functionality in AngularJS for a form within an ng-repeat loop is not functioning as intended

In my table, I used the <tr> tag repeatedly with ng-repeat="cancellationPercentData in cancellationPercent" Each tr tag contains a form with name and id set using $index See the code snippet below: <tbody> <tr ng-repeat="cancellatio ...

When I trigger a function by clicking, I also set a timeout of 1 second. Is it possible to deactivate this timeout from within the function itself?

One button triggers a function with a timeout that repeats itself upon clicking. Here's the code snippet: function chooseNum() { let timeout = setTimeout(chooseNum, 1000); } To disable this repeating function, I attempted another function like so ...

Apply the child's style if the parent's sibling contains the specified class

I am struggling to add the class "bold" to a child element (span) of a parent element (button.usa-nav-link). This parent element has a sibling (ul li.active) with the class .active. When the sibling is active, I want the child element's text to be bol ...

Vue automatically refreshes momentjs dates prior to making changes to the array

I am dealing with a situation where my child component receives data from its parent and, upon button click, sends an event to the parent via an event bus. Upon receiving the event, I trigger a method that fetches data using a Swagger client. The goal is ...

Stopping package.json from updating dependencies

I am curious if there is a method to prevent the package.json file from automatically updating to the latest versions of dependencies it includes. The main reason for wanting to avoid these updates is that I rely on running specific scripts with certain l ...

Transform Java code into HTML format for a visually appealing display similar to that in an Integrated Development Environment

Is there a way to showcase my Java code on an HTML page to resemble an Integrated Development Environment (IDE)? I've been searching for existing solutions but haven't found anything satisfactory yet. Ideally, I am looking for something similar t ...

Send form information using the REST method

Can someone provide guidance on how to properly handle this endpoint in my code? @PostMapping("/createUser") public ResponseEntity<User> createUser(@RequestBody User user) {...} I am looking to implement a user creation feature on my HTML ...

Nextjs optimizing page caching to reduce unnecessary rendering

Within my Next.js application, I have implemented two unique pages. Each page is designed to display a randomly selected person's name when the component is initially loaded. simpsons.tsx export default function Simpsons() { const [person, setPerso ...

Aligning an element vertically with the surrounding text on the same line

Trying to incorporate inline input range elements in a way that aligns with the line while also aligning with the right edge of the outer div has proven to be challenging. The HTML on the site is formatted using prettify, resulting in <span> elements ...

Guide to importing firebase-functions and firebase-admin using ES6 syntax for transpilation with Babel in Node 10

I've been working on my cloud functions in ES6 and using Babel to transpile them for the Node v10 environment. But, I've come across an odd issue. It seems that when I import firebase-functions like this: import functions from 'firebase-fu ...

Can someone guide me on how to retrieve data from a MUI table within a React project

Currently, I am retrieving data from a server in JSON format and looping through this data to display specific information. Everything is functioning as expected, but I'm encountering an issue with a Popover element that contains items with onclick ev ...

Employing jQuery to attach a new div to a dynamically generated div following a successful AJAX request

Currently, I am utilizing the marvelous WP-Polls plugin for WordPress, which boasts an innovative AJAX polling system. My main objective is to append a hidden div (.comment-block) to a fresh div (.voted) that will be dynamically injected into the DOM by th ...

I am having issues with this knob not updating, and the reason for this problem is unknown to me

Within my PHP code, I am utilizing the following: <?php @include_once('fields.php'); $gg = fetchinfo("val","inf","n","current"); $mm = fetchinfo("val","info","n","max"); $cc = fetchinfo("num","games","id",$gg); $percent = $cc / $mm * 100; ...

The property being set in Angular is undefined, causing an error

I am struggling to understand why the code below is not functioning as intended: Main.html <div class="MainCtrl"> <h1>{{message.test}}</h1> </div> Main.js angular.module('myApp') .controller('MainCtrl', f ...