5-item carousel in CSS gridView

I'm currently working on a thumbnail slider project. My goal is to display 5 thumbnails at a time, and allow users to move to the next or previous set of thumbnails by clicking on the corresponding buttons. I attempted to modify an existing slider that moves one item at a time, but my limited knowledge of JavaScript hindered my progress. Although the original code was functional, my modifications caused it to malfunction.

Is there anyone who can assist me in resolving this issue? Here is a link to the jfiddle with my code: http://jsfiddle.net/aqcktp3q/5/

Below is the HTML source code:

<section class="image-menu">
<div id="project" style="width:1150px;height:150px;"> 
<a href="#" class="control_next" style="color:#aaa;">></a>
<a href="#" class="control_prev" style="color:#aaa;"><</a>
    <ul>
        <li><a href="#"><img src="#" alt="" width="170" height="106" border="0" />
            <div>Item 1</div></a>
        </li>
        <li><a href="#"><img src="#" alt="" width="170" height="106" border="0" />
            <div>Item 2</div></a>
        </li>
        <li><a href="#"><img src="#" alt="" width="170" height="106" border="0" />
            <div>Item 3</div></a>
        </li>
        <li><a href="#"><img src="#" alt="" width="170" height="106" border="0" />
            <div>Item 4</div></a>
        </li>
        <li><a href="#"><img src="#" alt="" width="170" height="106" border="0" />
            <div>Item 5</div></a>
        </li>
        <li><a href="#"><img src="#" alt="" width="170" height="106" border="0" />
            <div>Item 6</div></a>
        </li>
    </ul>
</div>

CSS:

.image-menu {
    width:1160px;
    text-align:center;
    margin:0 auto;
    position:relative;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 10px;
    font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
}
.image-menu a {
    color: black;
    font-weight:bold;
}
.image-menu a:hover {
    text-decoration:none;
    color:#B22222;
}
.image-menu a img {
    border: 3px solid #FFFFFF;
}
.image-menu a:hover img {
    border: 3px solid #B22222;
}
.image-menu ul {
    padding-left:40px;
}
#project {
    position: relative;
    overflow: hidden;
    margin: 3px auto 0 auto;
    border-radius: 4px;
}
#project ul {
    position: relative;
    margin: 0;
    padding: 0;
    height: 200px;
    list-style: none;
}
#project ul li {
    position: relative;
    display: block;
    float: left;
    margin: 0;
    padding: 0;
    width: 170px;
    height: 150px;
    background: #ccc;
    text-align: center;
    /*line-height: 170px;*/
}
#project ul li div {
    width: 170px;
    height: 20px;
    line-height: 20px;
}
a.control_prev, a.control_next {
    position: absolute;
    top: 0%;
    z-index: 999;
    display: block;
    padding: 9% 2%;
    width: auto;
    height: auto;
    background: #2a2a2a;
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    font-size: 18px;
    opacity: 0.8;
    cursor: pointer;
}
a.control_prev:hover, a.control_next:hover {
    opacity: 1;
    -webkit-transition: all 0.2s ease;
}
a.control_prev {
    border-radius: 0 2px 2px 0;
}
a.control_next {
    right: 0;
    border-radius: 2px 0 0 2px;
}

JS:

jQuery(document).ready(function ($) {

    var slideCount = $('#project ul li').length;
    var slideWidth = $('#project ul li').width();
    var slideHeight = $('#project ul li').height();
    var sliderUlWidth = slideWidth * slideCount;

    $('#project').css({
        width: sliderUlWidth,
        height: slideHeight
    });

    $('#project ul').css({
        width: sliderUlWidth,
        marginLeft: -slideWidth
    });

    $('#project ul li:last-child').prependTo('#project ul');

    function moveLeft() {
        $('#project ul').animate({
            left: +slideWidth
        }, 200, function () {
            $('#project ul li:last-child').prependTo('#project ul');
            $('#project ul').css('left', '');
        });
    };

    function moveRight() {
        $('#project ul').animate({
            left: -slideWidth
        }, 200, function () {
            $('#project ul li:first-child').appendTo('#project ul');
            $('#project ul').css('left', '');
        });
    };

    $('a.control_prev').click(function () {
        moveLeft();
    });

    $('a.control_next').click(function () {
        moveRight();
    });

});

Answer №1

It appears that your code is functioning correctly. Just make sure to include jQuery in jsfiddle. I made this adjustment and included placeholder images, which resolved the issue. The problem seems to lie in your CSS as the left arrow is overlapping with the thumbnails. This is not related to a javascript error.

Click here to view the updated version

<section class="image-menu">
    <div id="project" style="width:1150px;height:150px;"> <a href="#" class="control_next" style="color:#aaa;">></a>
 <a href="#" class="control_prev" style="color:#aaa;"><</a>

        <ul>
            <li><a href="#"><img src="http://placehold.it/170x106" alt="" width="170" height="106" border="0" /><div>Item 1</div></a>

            </li>
            <li><a href="#"><img src="http://placehold.it/170x106" alt="" width="170" height="106" border="0" /><div>Item 2</div></a>

            </li>
            <li><a href="#"><img src="http://placehold.it/170x106" alt="" width="170" height="106" border="0" /><div>Item 3</div></a>

            </li>
            <li><a href="#"><img src="http://placehold.it/170x106" alt="" width="170" height="106" border="0" /><div>Item 4</div></a>

            </li>
            <li><a href="#"><img src="http://placehold.it/170x106" alt="" width="170" height="106" border="0" /><div>Item 5</div></a>

            </li>
            <li><a href="#"><img src="http://placehold.it/170x106" alt="" width="170" height="106" border="0" /><div>Item 6</div></a>

            </li>
        </ul>
    </div>
</section>

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

My custom CSS in React is being overshadowed by the default Bootstrap styles

View project image Currently working on a React project that requires Bootstrap. However, I am facing issues with Bootstrap overriding my custom CSS. Some default Bootstrap styles are affecting my headings. I have attempted various solutions such as placi ...

Encountering an issue: Unable to initiate a local server when running `npm start`

Currently diving into the world of React, I successfully set up a React app. However, upon running npm install after typing cd davidsapp, I encountered numerous warnings and errors. Subsequently, when issuing the command npm start, all of the errors are di ...

I am curious about the inner workings of the `createApplication()` function in the ExpressJS source code. Can you shed some light on

My goal is to deeply comprehend the inner workings of the Express library, step by step. From what I gather, when we import and invoke the 'express()' function in our codebase, the execution flow navigates to the ExpressJS library and searches fo ...

XMLHttpRequest Failing to Retrieve Data - Error Code 202

Currently, I am immersed in a project that involves using a webservice (specifically, VB.Net and Javascript). While debugging the code, I encountered an issue with the XmlHttpRequest.status returning as 202. Upon comparison with my previous webservice proj ...

Next.js is failing to infer types from getServerSideProps to NextPage

It seems like the data type specified in getServerSideProps is not being correctly passed to the page. Here is the defined model: export type TypeUser = { _id?: Types.ObjectId; name: string; email: string; image: string; emailVerified: null; p ...

Is there a way to fetch a random record from a MongoDb collection and exhibit all the fields of that haphazardly chosen document in HTML?

In my current project, I am fetching a random document from a MongoDB Collection and attempting to showcase all the fields of that document in HTML. Although I can successfully retrieve a random document, the issue arises when trying to display its fields ...

Issues with Disabling the Browser's Back Button with jquery

I have been attempting to prevent the back button from functioning in a specific Browser, Microsoft Bing. Interestingly, my code works only if I click somewhere in the window first. If I don't click anywhere and try to go back directly, it still allow ...

Navigating through different views in a Vue application using Vue Router directly from Vuex actions

Currently, I am in the process of developing a web application using Vue 2.x and Vuex 2.x. In this project, I need to retrieve some data from an external source via an http call. If this call fails, my objective is to redirect to a different page. GET_PET ...

Displaying a JSON array response on an HTML page with JavaScript and jQuery

After receiving a JSON response with data in array format, I need to display that data on an HTML page. In my HTML structure, I have div elements for merchant name, product name, and a remove button. The JSON data consists of arrays containing the same pro ...

The contents of the div disappear when using jQuery to extract it from a string

Update: I finally uncovered the reason behind the empty content of the #output div. The content is fetched from the server, which takes some time; by the time the document loads, the div remains empty. Does anyone have suggestions on how to extract infor ...

What is the best way to insert a tagline above a form?

I'm struggling to figure out where to place a tagline above my form. I want it to be neat and clean, but haven't been successful in finding the right spot. I attempted to insert an <h2> inside the form, but it doesn't look good at al ...

Getting a vector layer from JSON in OpenLayers 3 can be achieved by following these steps

Below is the script where I have included vector layers vectorLayer, vectorLayer5, vectorLayer1 How can I retrieve that layer from JSON.. I want to add multiple layers from an external JSON file with the icon PNG image // Updated on input change var ra ...

Error: Attempting to access 'title' property of undefined object leads to Uncaught TypeError

I am attempting to extract content from a Google Blogger Feed that can be found at this link. I am using JavaScript code from here. When inspecting the elements, I encountered a specific red warning message: Uncaught TypeError: Cannot read property ' ...

Any recommendations besides suggesting "g"? Let's brainstorm some other ideas for g!

Looking for some assistance with a mixin I wrote that seems to be causing a loop. Any suggestions on how to optimize the code or alternative methods to achieve the desired outcome? <div class='mh-60 pt-10'>dfgdfgsdfgsdf</div> ...

Nextjs unexpectedly displays blank page upon fetching data from Firebase Firestore without any error messages

I am currently facing an issue when trying to retrieve page details from Firebase Firestore using getStaticPaths and getStaticProps in my Next.js project. Despite following the code structure correctly, I am encountering a scenario where the page appears e ...

Top method for expanding a SASS class using an inner selector (sub-class)

When it comes to styling HTML to display messages, here's what I have: <div className="message"> <div className="message_label"> A message </div> </div> To style these messages, I am using the SCSS class bel ...

Navigate to a fresh web page without encountering any script loading issues

I am currently working on a web application that loads new pages without requiring the browser to reload. While some pages load perfectly fine, others are causing errors due to missing scripts. The code snippet below is used to load a new page: function lo ...

Add fresh inline designs to a React high-order component creation

Applying a common HOC pattern like this can be quite effective. However, there are instances where you may not want a component to be wrapped, but rather just extended. This is the challenge I am facing here. Wrapper HOC const flexboxContainerStyles = { ...

Troubleshooting Issue with JQuery Date Picker: Date Not Valid

Encountering an issue when using the date from JQuery DatePicker in an SQL Statement variable, resulting in an error of invalid datetime string. Even after attempting to format it with DateTime.Parse or Convert.DateTime. JQuery DatePicker <script> ...

"Code snippets customized for React are not functioning properly in the javascriptreact.json file within Visual Studio Code

I'm looking to incorporate some customized React.js code snippets into my Visual Studio Code setup. I am aware of the two files in VSCode that handle this - javascript.json and javascriptreact.json. Although the snippets work well in javascript.json, ...