Display 3 images with the carousel feature on the middle image

Currently, I am utilizing the jquery.jcarousellite plugin and attempting to make the second image active. Below is the code snippet I have tried:

<div id="jcl-demo">
    <div class="custom-container auto moreItems ">
        <a href="#" class="prev">&lsaquo;</a>
        <div class="carousel" style="visibility:hidden; left:-5000px;">
            <ul>
                <li><img src="images/comm-stake-holders.png"></li>
                <li><img src="images/comm-investors.png"></li>
                <li><img src="images/comm-developers.png"></li>
                <li><img src="images/construction.jpg"></li>
            </ul>
        </div>
        <a href="#" class="next">&rsaquo;</a>
        <div class="clear"></div>
    </div>
</div>
jqueryhtmlcss

Answer №1

If you want to control the starting item of a carousel, you can use the start property. Keep in mind that the first item is considered position 0, and it increments from there.

Here's the script:

$(function() {
    $(".carousel").jCarouselLite({
        btnNext: ".next",
        btnPrev: ".prev",
        start: 2
    });
});

For more information, check out this link

Answer №2

$(document).ready(function() {
    const totalItems = $(".slider ul li").length;
    const middleItem = Math.floor(totalItems / 2) - 1;
    
    $(".slider").jCarouselLite({
        btnNext: ".next-btn",
        btnPrev: ".prev-btn",
        start: middleItem
    });
});

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

Starting Web Server using File (file://) protocol

I'm currently using Quasar to develop a Vue SPA web app/page. For this project, the web app will only run by clicking on the index.html file generated by the Quasar packager. This package will not be distributed online or hosted on any domain. My mai ...

javascripthtmlnode.jsvue.jsquasar-framework

Disable the mouseenter event in jQuery when the window is resized

I am facing a challenge with my code. I have two different functions that are triggered based on the screen size - one for desktop and one for mobile. The issue arises when transitioning from a desktop to a mobile view, as the hover/mouseenter effect still ...

javascriptjquery

How can I show search results in a textbox using Codeigniter and Ajax?

After successfully fetching the data from the textbox, I need to display the id in a text input field. I also need to view the data of other fields from the table based on the textbox input. Below is the code snippet containing my View and Ajax implement ...

phpjqueryajaxcodeignitercodeigniter-3

Having trouble with your jQuery onclick function not triggering?

Clicking a specific 'link' will reveal a div containing content. Once clicked, the 'Open' button transforms into a 'Close' button with closing capabilities. jQuery Code $(document).ready(function () { $('.open_us ...

jquery

Is my website broken due to Internet Explorer?

The progress on my current website project has been smooth so far, but I'm encountering an issue when testing it in Internet Explorer. Whenever I try to view it in IE, the layout breaks completely. You can check it out at . I've attempted using C ...

htmlcssinternet-explorercross-browsergoogle-chrome-frame

"Creating dynamic webpage designs with CSS for responsive layouts

Currently, I am in the process of building a website utilizing a CSS fluid layout approach which is rooted in adaptive and responsive web design principles. For this project, I am avoiding using fixed values such as pixels (px) and instead opting for perc ...

htmlcssviewportfluid-layout

Attaching dynamic data to a specific element within an array

I have successfully created a demo where elements can be dropped into a specific area and their top and left values are displayed. I have also added functionality to remove dropped items and move them between different blocks. However, I am encountering so ...

javascripthtmlangulartypescript

To avoid any sudden movements on the page when adding elements to the DOM using jQuery, is there a way to prevent the page from

I have a challenge where I am moving a DIV from a hidden iFrame to the top of a page using jQuery. Here is my current code: $(document).ready(function($) { $('#precontainer').clone().insertBefore(parent.document.querySelectorAll(".maincontainer" ...

javascriptjquery

Encountering a 'redirect' error within the views.py file of a Django project

The registration form is working smoothly, however, I am encountering an issue with the redirect function in addUser. Upon attempting to save data in the admin panel, I am facing an error during the redirect process. from django.shortcuts import render,r ...

htmldjangopython-3.xdjango-2.1

How can I ensure that the Hamburger menu fully covers the entire viewport when it is open?

My hamburger menu is fully functional using CSS alone. However, when the menu opens, it doesn't fill the entire screen as I would like. Currently, my page content appears below the open menu, creating a cluttered look. https://i.sstatic.net/EtTsr.png ...

htmlcssnavigationdisplay

Performing a numerical evaluation within a conditional if/else statement

I am facing an issue with a login page that requires users to enter a code. My aim is to track how many times a user enters the wrong code, and if it exceeds 3 attempts, display a message asking them to restart the process. However, the counter I impleme ...

phpjquerymysqldatabasecounter

Does a DOM API exist specifically for querying comment nodes within the document?

My document contains a debugging comment that appears as follows: <!--SERVER_TRACE {...}--> Is there a method to search the DOM and access this specific node? I would prefer a vanilla JavaScript solution, without relying on any external libraries. ...

javascripthtmldom

How to override an event in JavaScript when a specific value is entered

I am looking to implement a system with complex conditions. The goal is to have an alert appear when a value is inputted and the button is clicked. First, a confirmation message Have you input ? should be displayed, followed by clicked with input. If no va ...

javascripthtml

Guide on implementing toFixed method with JSON data

I've been struggling with using the toFixed method to round up numbers from my json response. Despite trying various approaches, I haven't had any luck. Here's the code I'm working with: var jsonData = '[{"rank":"9.8776580879"," ...

jqueryjson

Learning the process of extracting Fast Fourier Transform (FFT) data from an audio tag within

I am struggling to retrieve the FFT data from an <audio> tag without any syntax errors. After reviewing the Web Audio API documentation, I have written a sample code snippet as follows: <audio id="aud" controls="controls" src="test.mp3"></a ...

htmlaudiofft

Discovering the specific URL of a PHP file while transmitting an Ajax post request in a Wordpress environment

I'm currently working on a WordPress plugin and running into some issues with the ajax functionality. The main function of my plugin is to display a form, validate user input, and then save that data in a database. Here is the snippet of code for my ...

javascriptphpjqueryajaxwordpress

Finding the number of table cells in a row using JQuery

My website has an image gallery with a total of 39 images. There are two buttons, "prev" and "next", as well as a counter in the middle. The images are displayed inside a table, with only 6 visible at a time. When a user clicks the "next" button, 6 new ...

jquerytablerowtablecell

UI-Router: What is the best way to access a page within my project without adding it as a State?

Currently in the process of learning Angular and UI-Router. Initially, I followed the advice of many and chose to utilize UI-Router. In my original setup, the login page was included in all States. However, I decided it would be best to keep it as a separ ...

javascriptjqueryangularjsasp.net-mvcangular-ui-router

Retrieving Blocked Images with Selenium: A Step-by-Step Guide

HTML: <html> <head> <body onload="document.getElementById('a').style.display='block';"> <div id="a" align="center" onclick="document.location.reload();" style="display: block; cursor: pointer;"> <img width="9 ...

javascripthtmlcssseleniumselenium-webdriver

adjust the webpage to be optimized for the size of the screen

Looking to adjust the webpage layout so that it fits perfectly on the screen without the need for vertical or horizontal scrolling. Additionally, we want the image to be centered. See below for the current code snippet: #copyright { top: 0px; right: ...

htmlcss