What is the process for adjusting the width of the horizontal scrollbar track?

I'm currently working on creating an image slider with a scrollbar positioned at the bottom. The main idea is to display the images in fullscreen mode with the active image centered, flanked by two other images on each side.

One challenge I faced was ensuring that the scrollbar remains independent from the slider itself. Despite my best efforts, I couldn't resolve this issue.

After some guidance from @kip, I learned that I need to remove a class for the central image and add a new class named 'img-slider-other' to all other images.

https://i.sstatic.net/jtQwz.jpg
htmljquerycssbootstrap-4image-slider

Answer №1

Is this what you were looking for?

.slider {
            width: 100%;
            text-align: center;
            overflow: hidden;
        }
        
        .slides {
            display: flex;
            overflow-x: auto;
            margin-bottom:50px;
            scroll-snap-type: x mandatory;
            scroll-behavior: smooth;
            -webkit-overflow-scrolling: touch;
        }
        
        .slides::-webkit-scrollbar {
            width: 10px;
            height: 20px;
        }
        
        .slides::-webkit-scrollbar-thumb {
            background: black;
            border-radius: 10px;
        }
        
        .slides::-webkit-scrollbar-track {
            background: transparent;
            border: 1px solid #ccc;
            max-width: 60% !important;
            margin-left:25vw;
            margin-right:25vw;
        }
        
        .slides::-webkit-scrollbar-track-piece {
            max-width: 200px;
            background-color: #337ab7;
            height: 200px;
        }
        
        .slides>div {
            scroll-snap-align: start;
            flex-shrink: 0;
            width:70%;
            max-width: 70%;
            /* height: auto;  */
            height: 500px;
            /* For Temp */
            margin-right: 50px;
            margin-bottom:50px;
            border-radius: 10px;
            background: #eee;
            transform-origin: center center;
            transform: scale(1);
            transition: transform 0.5s;
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 100px;
        }
        
        img {
            object-fit: cover;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
        
        body {
            display: flex;
            align-items: center;
            justify-content: center;
        }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="slider">
        <div class="slides">
            <div id="slide-1">
                1
            </div>
            <div id="slide-2">
                2
            </div>
            <div id="slide-3">
                3
            </div>
            <div id="slide-4">
                4
            </div>
            <div id="slide-5">
                5
            </div>
        </div>
    </div>

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

gallery showcasing pictures with a prominent main image and accompanying smaller images

I am struggling to display my image gallery the way I envision it. I would like to have a larger main image with the rest of the images displayed on the right side below it. The current code I have is: <div class="gallery"> <a href=" ...

htmlcss

Show each item in the list vertically, using a single unordered list but displaying them in

Is there a way to display list items vertically in multiple columns using only a single ul? I need the output to look like: a e i b f j c g d h Any suggestions on how to achieve this would be greatly appreciated. Thank you! ...

htmlcss

Creating dynamic controls in edit template of KendoUI ListView at runtime

Linked to this inquiry, I am interested in replicating the same functionality within a ListView rather than a kendo Grid. My attempt can be viewed here. The editing template switches between different controls based on the initial model value during edit m ...

javascriptjquerykendo-uikendo-listview

Efficiently rendering a million elements on an HTML canvas (and replicating the render from the server)

I'm currently working on developing an HTML application using a canvas as the base. The canvas will consist of a large grid, around 1500 x 700 in size, totaling to over 1 million cells. The main concern is how to efficiently render this grid without ...

javascripthtmlcanvas

Change the class upon clicking the element

Looking to create a function that toggles classes on elements when specific links are clicked. For example, clicking on link 1 should add the "active" class to the red element, while clicking on link 2 should do the same for the pink element, and so forth. ...

javascripthtmljquerycss

Hover Problem with HTML Image Tag

Having trouble understanding why the images are not changing color on hover. The images are svg files and should be able to adopt the color. Here is the code snippet: HTML: <div class="toolTile col-md-3"> <a href="#/cards"> <im ...

htmlcssimagesvg

Fetching JSON Data from Web Service using Ajax URL Field - A Simple Guide

I'm facing an issue while attempting to retrieve JSON Data from a web service using ajax url. This is how I have coded it so far: <script type="text/javascript> $('#kategoriTable').dataTable({ ajax: { u ...

javascriptjqueryjsonajax

Show the button only when the text is updated

Is there a way to display a button only when the quantity of items in the cart changes, similar to the eBay shopping cart feature? I was able to implement it but it's not functioning as expected. Here is the link to what I have so far. Does anyone kno ...

javascriptphpjqueryhtmlshopify

Invisible ReCaptcha by Google not living up to its invisible name

I am having trouble getting Google's Invisible ReCaptcha to function correctly after submitting a form. Despite setting my site-key for an invisible ReCaptcha, the "old" style ReCaptcha keeps appearing. I am unsure why this is happening and would appr ...

javascriptjqueryrecaptchacaptchainvisible

Incorporating ui-sref within a Node.js environment: A comprehensive guide

Within my Node.js backend, I am looking to trigger a ui-sref call that will redirect the front end using routes. My main goal is to utilize this function: .state('editCompanyProfile',{ url:'/editCompanyProfile', ...

jqueryangularjsnode.jshttp-redirectui-sref

Placing pictures next to each other in html

I need help with aligning two 380 width images side by side within a 760 width table. I have highlighted the area where I'm having trouble. Can someone assist me with this? Your help is much appreciated! I have marked the section with the comment "I& ...

htmlimagehtml-table

Adding dynamic images to Bootstrap Popover on the fly

Does anyone have suggestions on how to effectively retrieve the image from the data-img attribute in order to use it for a popover displaying product images? Thank you! <a href='#' class='toggle-popover' title='Hello World&apos ...

jquerybootstrap-4

What are some ways to create a responsive Grid in React JS with the help of Bootstrap?

Utilizing bootstrap in my react js project, I am implementing css grid to showcase some cards. However, I am encountering responsiveness issues. import React from "react"; import "./Project.css"; export const Project = () => { return ( <div& ...

cssreactjsbootstrap-4

The checkboxes seem to be malfunctioning following an ajax request

I've been attempting to utilize ajax to load data, but for some reason the checkboxes aren't functioning. Below is the HTML I'm trying to load via ajax: <div class="mt-checkbox-list" > <?php foreach($product_offerings as $row){ $c ...

javascriptphphtmlajaxcodeigniter

How do you efficiently include several elements within a single column in Boostrap 5?

I've been working with Bootstrap 5 to display a grid of images similar to this link, but the images are not displaying as intended due to some CSS code. #projects img { width: 100%; height: 100%; } <section id="projects"> ...

htmlcssbootstrap-5

Experiencing difficulties with transferring a variable within a Jquery function

I need help with this function function procData(a) { $('#loading' + a).show(); $.post("ajax.php?talk=" + a, { slot: $('#slot' + a).val() }, function (response) { $('#talkdesc' + a).fadeOut(); ...

jquery

Iterate through a JavaScript object while preserving the key along with its corresponding value

var info = { 2016-09-24: { 0: {amount: 200, id: 2}, 1: {...} }, 2016-09-25: { 0: {amount: 500, id: 8}, 1: {...} } } In order to display the data stored in the object above, I want to create a view that looks like this: "**" will r ...

htmlreactjsobject-literal

Is there a way to emphasize the syntax of a displayed <script> tag?

Here is the code snippet I am working with: <!DOCTYPE html> <meta charset="utf-8"> <link rel="stylesheet" href="http://yandex.st/highlightjs/7.3/styles/default.min.css"> <script src="http://yandex.st/highlightjs/7.3/highlight.min.js"& ...

htmlsyntax-highlighting

having trouble generating a vertical advertisement banner on wordpress

Hey there, I'm attempting to place a vertical banner ad created with HTML/CSS inside a textarea in the WordPress widget section. I added a textarea to the side column, inserted the HTML with corresponding CSS styles into the stylesheet. However, the s ...

htmlcsswordpress

Retrieve and manage information from a database using node.js and express

I am currently working on developing a jQuery mobile application and have set up a Linux server with node.js and express. The authentication process seems to be working properly, as well as the connection to another database server. However, I am facing a ...

javascriptjqueryjsonnode.jsexpress