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

Utilize open-source tools for website design

Can anyone suggest an open source toolset for WYSIWYG HTML/CSS design? What tools have you found most helpful in your projects? ...

htmlcss

Creating a centered arrow using CSS within boxes

Here is the CSS class that I have applied to my divs: .rightarrow{ width: 0; height: 0; border-style: solid; border-width: 10px 0 10px 20px; border-color: transparent transparent transparent #aaaaa9; } This is ...

htmlcss

Generate a menu submenu allowing for interactive toggling and dynamic visualization of expandable/collapsible sections upon clicking, featuring visually

Looking for assistance in creating a dynamic menu with sub-menus that can expand upon clicking. The goal is to have an expandable menu structure where the user can click to expand or collapse certain sections. However, my current code is not functioning co ...

javascriptjqueryhtmlcss

Flashing background colors on a website

Can anyone explain why this code won't alternate the background color of my website between two different colors? <script type="text/javascript"> function blinkit() { intrvl = 0; for (nTimes = 0; nTimes < 3; nTimes++) { intrv ...

jqueryhtmlcssbackground-color

Incorporate pug and sass into your React project for a more

Are pug/jade and sass compatible with react? I enjoy organizing my code by separating files, and the functionality that sass and pug provide is great for this purpose. Is there a way to integrate pug and sass into a react project? Pug example: doctype ...

javascripthtmlcssreactjspug

Enable or disable dropdown based on selected radio button status

I need the dropdown to be disabled unless the radio button labeled prov is selected. It should only be enabled when prov is chosen. I attempted to create a demo, but it's not functioning correctly and I can't figure out why. HTML: <td colsp ...

javascriptjquery

Is there a way to prevent the back button from functioning in my web browser?

How can I prevent the back button from being used on my webpage? Can you provide a list of possible methods to achieve this? if($data->num_rows > 0){ while($row = $data->fetch_assoc()){ header('Location:../cashier.php&apo ...

javascriptphphtml

The event on the full calendar is stuck in place and will not budge

function moveEvent(event, delta, revertFunc) { console.log(event.title + " has been moved to " + event.start.format()); var page = '../include/UpdateCalendarEvent.php'; $("#dialog") .data('start', event.start.format ...

javascriptjqueryajaxeventsfullcalendar

The ng-model remains unchanged when the <select> element is modified using JavaScript

I am currently working on creating a customized dropdown box with the help of JavaScript and anglersJS to connect the data with the select element. The user interaction involves clicking on a div element that is styled to act as the dropdown option. This d ...

javascripthtmlangularjs

Choosing several checkboxes and populating an array with values - HTML and JavaScript

I am working on a modal dialog that displays a table with checkboxes next to user names. My goal is to link these checkboxes to the respective names so that when a box is checked next to 'Jon' in the table, the name 'Jon' gets selected. ...

javascripthtmlarraysangularjscheckbox

Master the art of manipulating JSON arrays with jQuery

Looking to extract the information with a specific key and payment value from a JSON array generated by an API request. The desired data is: "Key":"PCP","Payment":170.08 The array in question looks like this: {"VehicleResults":[{"Id":"0","FinanceProduct ...

jqueryarraysjson

Issue: AngularJS Injector Module Error

Recently started learning angularjs and trying to set up an app. Here's a simple and direct way to do it: Angular controller: (function () { 'use strict'; angular .module('myQuotesApp') .controller(' ...

javascriptc#htmlangularjs-directiveasp.net-core-mvc

Surprising Results when Using getBoundingClientRect()

Check out this code on CodePen In my current project, I'm attempting to position the footer div at the bottom of the page in such a way that it aligns with the maximum value of the bottom coordinates of both the menu and content divs (Math.max(menu, ...

javascriptcssgetboundingclientrect

The error message for validating my form magically disappears

I've been working on creating a registration form using HTML, Bootstrap, and JavaScript. My goal was to display an error message when a field is left empty, but for some reason, the error message appears briefly and disappears afterwards. I can't ...

javascripthtml

The functionality of XPATH does not seem to be properly executed with JQuery

<html> <head> <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("button").click(function(){ $("[href!='http://w ...

jqueryhtml

The form within the while loop is only functioning with the initial result

Within a while loop, I have a form that is being processed with ajax. The issue is that it only works on the first form and not on the others. Can someone take a look? <?php while($a = $stmt->fetch()){ ?> <form method="post" action=""> ...

javascriptphpjqueryhtmlajax

In a Twitter Bootstrap environment, the button cursor transforms into an I-beam when activated

After utilizing twitter bootstrap to construct a small blog site and integrating a third-party file upload application into the project, I encountered an issue. The CSS files in the file uploader style the "upload button," but when my cursor hovers over it ...

htmlcsstwitter-bootstrap

The elements being parsed are appearing as undefined

Currently, I am attempting to analyze this JSON structure: { "customers": [ { "name":"joe" , "cars":[ {"name":"honda","visits":[ {"date":"01/30/14","Id":"201"}, {"date":"01/30/14","Id":"201"}, {"date":"02/12/14","Id":"109"} ...

javascriptjqueryjsonparsing

The background image vanishes in Chrome when scrolling downwards

After setting an image with a resolution of 1980 x 1200 as the background for my web page, I encountered an issue. When scrolling down, around the height of 1200px, the image disappears and is replaced by a white background. This problem only occurs in Chr ...

htmlcssgoogle-chrome

Is there a way to ensure that the elements created by the select form are only generated once?

I have a JavaScript function that dynamically creates paragraph and input elements based on user selection in HTML. However, I am looking to optimize the code so that each element is only created once. Snippet of JavaScript code: function comFunction(sel ...

javascripthtmlselectinput