Having trouble with fixing the width and aligning a custom scrollbar in the center

I have been working on creating a carousel with items that are horizontally aligned.

With the requirement of having each child element (approximately a dozen) to fill one third of the parent's width and displaying three items at once, I utilized Bootstrap 4, custom CSS, and the Perfect-scrollbar plugin.

var ps = new PerfectScrollbar('#carousel');
html,
body {
  padding: 0;
  margin: 0;
  height: 100%;
}
.page-wrapper {
  min-height: 100%;
}
.hero {
  height: 100vh;
  background: #212121;
  justify-content: center;
  align-items: center;
}

#carousel {
  display: flex;
  list-style-type: none;
  position: relative;
  margin: 0;
  padding: 0;
  justify-content: left;
  align-items: center;
}
#carousel li {
  padding: 0 0 70px 0;
}
#carousel a {
  text-decoration: none;
  color: #fff;
}
#carousel img {
  display: block;
  width: 100%;
}
#carousel .caption {
  padding: 20px 20px 0 20px;
}
#carousel h2 {
  font-size: 20px;
  line-height: 1;
  margin: 0;
  padding: 0;
}
#carousel p {
  font-size: 10px;
  padding: 0;
  margin: 5px 0 0 0;
}
#carousel .ps__rail-x {
  background: #5C5C5C;
  height: 3px;
  margin: 0 auto;
}
#carousel .ps__thumb-x {
  height: 3px;
  margin-bottom: -2px;
  border-radius: 0;
  background: #fff;
}
<link href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<link href="//rawgit.com/utatti/perfect-scrollbar/master/css/perfect-scrollbar.css" rel="stylesheet"/>
<script src="//rawgit.com/utatti/perfect-scrollbar/master/dist/perfect-scrollbar.js"></script>
<div class="page-wrapper">
  <div class="hero d-flex">
    <div class="container-fluid p-0">
      <ul id="carousel">
        <li class="col-xs-12 col-sm-6 col-md-4">
          <a href="#">
        <img src="https://placeimg.com/600/400/people" alt="">
        <div class="caption">
          <h2>Lorem</h2>
          <p>A true story</p>
        </div>
        </a>
        </li>
        <li class="col-xs-12 col-sm-6 col-md-4">
          <a href="#">
        <img src="https://placeimg.com/600/400/nature" alt="">
        <div class="caption">
          <h2>Lorem ipsum</h2>
          <p>Lorem ipsum. Dolor sit amet.</p>
        </div>
        </a>
        </li>
        <li class="col-xs-12 col-sm-6 col-md-4">
          <a href="#">
        <img src="https://placeimg.com/600/400/arch" alt="">
        <div class="caption">
          <h2>Lorem</h2>
          <p>Lorem ipsum. Dolor sit amet</p>
        </div>
        </a>
        </li>
        <li class="col-xs-12 col-sm-6 col-md-4">
          <a href="#">
        <img src="https://placeimg.com/600/400/animals" alt="">
        <div class="caption">
          <h2>Into the wild</h2>
          <p>Lorem ipsum dolor sit amet, consectetur</p>
        </div>
        </a>
        </li>
      </ul>
    </div>
  </div>
</div>

The outcome seemed satisfactory, but I encountered a challenge in setting a fixed width of 300px for the rail and centering it. How can I achieve this?

javascriptcsscarousel

Answer №1

If you want to customize the width of the scrollbar thumb in the PerfectScrollbar instance, you can simply pass the maxScrollbarLength parameter and set it to the desired width. Here's an example:

var ps = new PerfectScrollbar('#carousel', {
  // set the thumb width to 300px
  maxScrollbarLength: 300
});

Check out this live demo: https://jsfiddle.net/Towkir/wkoyy0uf/

Answer №2

The desired outcome was achieved by incorporating

.ps__rail-x {margin: 0 35%;}

as well as

var ps = new PerfectScrollbar('#carousel', {
  maxScrollbarLength: 150
});


var ps = new PerfectScrollbar('#carousel', {
  maxScrollbarLength: 150
});
html,
body {
  padding: 0;
  margin: 0;
  height: 100%;
}
.page-wrapper {
  min-height: 100%;
}
.hero {
  height: 100vh;
  background: #212121;
  justify-content: center;
  align-items: center;
}
#carousel {
  display: flex;
  list-style-type: none;
  position: relative;
  margin: 0;
  padding: 0;
  justify-content: left;
  align-items: center;
}
#carousel li {
  padding: 0 0 70px 0;
}
#carousel a {
  text-decoration: none;
  color: #fff;
}
#carousel img {
  display: block;
  width: 100%;
}
#carousel .caption {
  padding: 20px 20px 0 20px;
}
#carousel h2 {
  font-size: 20px;
  line-height: 1;
  margin: 0;
  padding: 0;
}
#carousel p {
  font-size: 10px;
  padding: 0;
  margin: 5px 0 0 0;
}
#carousel .ps__rail-x {
  background: #5C5C5C;
  height: 3px;
  margin: 0 35%;
}
#carousel .ps__thumb-x {
  height: 3px;
  margin-bottom: -2px;
  border-radius: 0;
  background: #fff;
}
<link href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<link href="//rawgit.com/utatti/perfect-scrollbar/master/css/perfect-scrollbar.css" rel="stylesheet"/>
<script src="//rawgit.com/utatti/perfect-scrollbar/master/dist/perfect-scrollbar.js"></script>
<div class="page-wrapper">
  <div class="hero d-flex">
    <div class="container-fluid p-0">
      <ul id="carousel">
        <li class="col-xs-12 col-sm-6 col-md-4">
          <a href="#">
        <img src="https://placeimg.com/600/400/people" alt="">
        <div class="caption">
          <h2>Lorem</h2>
          <p>A true story</p>
        </div>
        </a>
        </li>
        <li class="col-xs-12 col-sm-6 col-md-4">
          <a href="#">
        <img src="https://placeimg.com/600/400/nature" alt="">
        <div class="caption">
          <h2>Lorem ipsum</h2>
          <p>Lorem ipsum. Dolor sit amet.</p>
        </div>
        </a>
        </li>
        <li class="col-xs-12 col-sm-6 col-md-4">
          <a href="#">
        <img src="https://placeimg.com/600/400/arch" alt="">
        <div class="caption">
          <h2>Lorem</h2>
          <p>Lorem ipsum. Dolor sit amet</p>
        </div>
        </a>
        </li>
        <li class="col-xs-12 col-sm-6 col-md-4">
          <a href="#">
        <img src="https://placeimg.com/600/400/animals" alt="">
        <div class="caption">
          <h2>Into the wild</h2>
          <p>Lorem ipsum dolor sit amet, consectetur</p>
        </div>
        </a>
        </li>
      </ul>
    </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

Continuous front-end promise awaiting response from back-end Node.js function

Currently, I am working on a basic React frontend where I need to fetch some data from my backend API powered by Node.js. This backend API calls an external API to get the required data. Although I have verified that the data is fetched successfully on the ...

javascriptnode.jsreactjses6-promise

Example when a specific $scope.apply() is needed:

I am currently delving into the world of Angular and experimenting with different ways to learn how it functions. One of my projects involves creating a simple application where users can add new entries through an HTML interface, store them in a SQLite da ...

javascriptangularjs

Animating CSS when closing a modal box

I followed the instructions from a tutorial on W3Schools here to create this code. The "open model" button triggers the modal to open with a smooth CSS animation, which looks great. However, when I click the close button, the modal abruptly closes without ...

javascriptcssanimationmodal-dialog

Adjust the vertical scaling of a container in CSS Grid to maintain aspect ratio similar to an <img>

I am attempting to recreate a demonstration where the house image scales as the viewport height decreases. However, instead of using an <img>, I would like to use a container that also includes absolutely positioned content (unable to provide all the ...

htmlcsscss-grid

What is the process for creating a global variable in JavaScript?

Having trouble changing the value of "invocation_num" within a loop? I attempted to modify it as follows, but ended up with an undefined value. Any help would be greatly appreciated. $(document).on("click", '.favoret', function(){ document ...

javascriptjqueryhtmlcss

Designing the button outline variant with Material-UI styling

I've recently started using Material UI and I'm facing some difficulties. One of the challenges I'm encountering is with a button component export default function TheButton(props: PropsWithChildren<Props>) { const { className, hover ...

cssreactjsmaterial-ui

Tips for Passing the correct ID to the modal component in reactJs

Looking for some assistance. The issue I'm encountering is that the modal isn't displaying the correct ID of the data I wish to delete Here is my DataTable.jsx code: import React, { useState, useEffect } from "react"; import axios from ...

javascriptreactjsbootstrap-5

How to inject a variable into an AngularJS service that utilizes both $http and $interval functions?

Struggling with $http and $interval, I stumbled upon this code. http://embed.plnkr.co/fSIm8B/script.js I forked it here: http://plnkr.co/edit/Al8veEgvESYA0rhKLn1q To make it more functional, how can I pass a variable to the service? Here is the broken ...

javascriptajaxjsonangularjs

Can't seem to res.send using Express framework

Hello, I'm encountering an issue when trying to send a response using Express. I've seen suggestions in other questions that changing the variables err and res may resolve this problem, but it hasn't worked for me. router.post('/checkP ...

javascriptnode.jsexpress

CSS - Tips for affixing footer to the bottom of a webpage

Currently, I am working on a small personal project to brush up my HTML & CSS skills, and I am encountering some difficulties in fixing the footer of my website to the bottom of the page. You can view the site here. I have researched online and discovered ...

htmlcssfooter

What is the best way to ensure the initial item in an accordion group remains open by default when using NextJS?

I've successfully developed an accordion feature in NextJS from scratch and it's functioning flawlessly. However, I am looking to have the first item of the accordion open automatically when the page loads. Can anyone guide me on how to make this ...

javascriptreactjsarraysjsonnext.js

Placing an image within a table row that spans multiple rows to maintain center alignment in relation to other rows that are not span

Having trouble with centering the image in an email signature when viewed in GMail. The layout works fine in JSBin but appears uneven in GMail. Any suggestions on how to make sure it stays centered? Check out the code here https://i.sstatic.net/F2LXV.png ...

htmlcsshtml-table

Images not showing in Vue.js

I have been working on setting up a carousel using bootstrap-vue. It is being generated dynamically through an array containing three objects with keys such as id, caption, text, and image path. The issue I am facing now is that while the caption and text ...

javascripttwitter-bootstrapvue.jsbootstrap-4bootstrap-vue

Vue Eslint Extension

My current project utilizes the eslint vue plugin with specific rules set in place. "rules": { "vue/html-closing-bracket-newline": ["error", { "singleline": "never", "multiline": "always" }], "vue/html-closi ...

javascriptvue.jseslint

Tips on incorporating Angular ng-include

As a newcomer to AngularJS on an Express Framework, I am facing an issue with loading HTML pages as includes. Although my routing in Angular is set up correctly and functioning well, when I try to use ng-include in my HTML pages, it results in a loop and t ...

javascriptjqueryhtmlangularjsinclude

The impressive wipe effect in velocity.js using css and jquery

I am looking to achieve a slide effect similar to Powerpoint's wipe using css, jquery, or velocity.js. Here is a video showing the desired effect: https://www.youtube.com/watch?v=VSBB0wfccws I attempted to use css3 masking (svg/gradient) but was uns ...

jquerycssvelocity.js

sending the express application to the route modules

Currently, I am developing an express 4 api server with no front end code. Rather than structuring my project based on file types such as routes and models, I have decided to organize it around the business logic of the project. For example, within my Use ...

javascriptnode.jsexpressdirectory-structure

Animation triggered by scrolling is not functioning/displaying div

I'm attempting to make a div fade up when it enters the viewport by using the library found at https://github.com/michalsnik/aos Unfortunately, all that seems to happen is that the div gets hidden. In the head section of my HTML file, I've refe ...

javascriptjqueryanimation

Retrieve information from the existing URL and utilize it as a parameter in an ajax request

Currently, I am working on a website with only one HTML page. The main functionality involves fetching the URL to extract an ID and then sending it to an API using an AJAX call. Upon success, the data related to the extracted ID is displayed on the page. H ...

javascriptjqueryhtmlajaxurl

Looking to send an HTTP request to submit a form within a Node.js application to an external website?

Can someone help me with submitting a form on a different site and receiving a response? I'm having trouble figuring out how to do this. Here is the website I am targeting: Below is my code snippet: var http = require('http'); var options ...

javascriptnode.jshttprequest