Tips for getting this slider to completely fill its container and be centered within the container

I've successfully adjusted this code for a slider and it's working perfectly. However, I'm looking to place it in a code block on SquareSpace. My goal is to have the slider fill the container of the code block and be centered, rather than being fixed at 600x400 and aligned to the left. If anyone knows of an easier way to achieve what I want, I'd love to hear your suggestions!

//current position
var pos = 0;
//number of slides
var totalSlides = $("#slider-wrap ul li").length;
//get the slide width
var sliderWidth = $("#slider-wrap").width();

$(document).ready(function() {
  /*****************
     BUILD THE SLIDER
    *****************/
  //set width to be 'x' times the number of slides
  $("#slider-wrap ul#slider").width(sliderWidth * totalSlides);

  //next slide
  $("#next").click(function() {
    slideRight();
  });

  //previous slide
  $("#previous").click(function() {
    slideLeft();
  });

  /*************************
     //*> OPTIONAL SETTINGS
    ************************/
  //automatic slider
  var autoSlider = setInterval(slideRight, 10000);

  //for each slide
  $.each($("#slider-wrap ul li"), function() {
    //set its color
    var c = $(this).attr("data-color");
    $(this).css("background", c);

    //create a pagination
    var li = document.createElement("li");
    $("#pagination-wrap ul").append(li);
  });

  //counter
  countSlides();

  //pagination
  pagination();

  //hide/show controls/btns when hover
  //pause automatic slide when hover
  $("#slider-wrap").hover(
    function() {
      $(this).addClass("active");
      clearInterval(autoSlider);
    },
    function() {
      $(this).removeClass("active");
      autoSlider = setInterval(slideRight, 10000);
    }
  );
});
//DOCUMENT READY

/***********
 SLIDE LEFT
************/
function slideLeft() {
  pos--;
  if (pos == -1) {
    pos = totalSlides - 1;
  }
  $("#slider-wrap ul#slider").css("left", -(sliderWidth * pos));

  //*> optional
  countSlides();
  pagination();
}

/************
 SLIDE RIGHT
*************/
function slideRight() {
  pos++;
  if (pos == totalSlides) {
    pos = 0;
  }
  $("#slider-wrap ul#slider").css("left", -(sliderWidth * pos));

  //*> optional
  countSlides();
  pagination();
}

/************************
 //*> OPTIONAL SETTINGS
************************/
function countSlides() {
  $("#counter").html(pos + 1 + " / " + totalSlides);
}

function pagination() {
  $("#pagination-wrap ul li").removeClass("active");
  $("#pagination-wrap ul li:eq(" + pos + ")").addClass("active");
}
/*GLOBALS*/

* {
  margin: 0;
  padding: 0;
  list-style: none;
}

#wrapper {
  position: relative;
  max-width: 48rem;
  margin: 0 auto;
}

#slider-wrap {
  display: flex;
  width: 600px;
  height: 400px;
  position: relative;
  overflow: hidden;
  color: #fff;
  border-radius: 8px;
}

#slider-wrap ul#slider {
  width: 100%;
  height: 100%;
  position: absolute;
}

#slider-wrap ul#slider li {
  float: left;
  position: relative;
  width: 600px;
  height: 400px;
}

#slider-wrap ul#slider li>div {
  position: absolute;
  top: 20px;
  left: 35px;
}

#slider-wrap ul#slider li>div h3 {
  font-size: 36px;
  text-transform: uppercase;
}

#slider-wrap ul#slider li i {
  text-align: center;
  line-height: 400px;
  display: block;
  width: 100%;
  font-size: 90px;
}


/*btns*/

.btns {
  position: absolute;
  width: 45px;
  height: 50px;
  top: 50%;
  margin-top: -25px;
  line-height: 49px;
  text-align: center;
  cursor: pointer;
  background: rgba(0, 0, 0, 0.1);
  z-index: 100;
  border-radius: 5px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -khtml-user-select: none;
  -ms-user-select: none;
  -webkit-transition: all 0.1s ease;
  -moz-transition: all 0.1s ease;
  -o-transition: all 0.1s ease;
  -ms-transition: all 0.1s ease;
  transition: all 0.1s ease;
}

.btns:hover {
  background: rgba(0, 0, 0, 0.3);
}

#next {
  right: 10px;
}

#previous {
  left: 10px;
}


/*bar*/

#pagination-wrap {
  min-width: 20px;
  bottom: -90%;
  margin-left: auto;
  margin-right: auto;
  height: 10px;
  position: relative;
  text-align: center;
}

#pagination-wrap ul {
  width: 100%;
}

#pagination-wrap ul li {
  margin: 0 4px;
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #fff;
  opacity: 0.4;
  position: relative;
  top: 0;
}

#pagination-wrap ul li.active {
  width: 9px;
  height: 9px;
  top: 2px;
  opacity: .9;
  box-shadow: rgba(0, 0, 0, 0.1) 1px 1px 0px;
}


/*ANIMATION*/

#slider-wrap ul,
#pagination-wrap ul li {
  -webkit-transition: all 0.3s cubic-bezier(1, .01, .32, 1);
  -moz-transition: all 0.3s cubic-bezier(1, .01, .32, 1);
  -o-transition: all 0.3s cubic-bezier(1, .01, .32, 1);
  -ms-transition: all 0.3s cubic-bezier(1, .01, .32, 1);
  transition: all 0.3s cubic-bezier(1, .01, .32, 1);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://kit.fontawesome.com/35d3cb3e33.js" crossorigin="anonymous"></script>

<body>
  <div id="wrapper">
    <div id="slider-wrap">
      <ul id="slider">
        <li data-color="#1abc9c">
          <i class="fa fa-image"></i>
        </li>
        <li data-color="#3498db">
          <i class="fa fa-gears"></i>
        </li>
        <li data-color="#9b59b6">
          <i class="fa fa-sliders"></i>
        </li>
      </ul>

      <!--controls-->
      <div class="btns" id="next"><i class="fa-solid fa-chevron-right"></i></div>
      <div class="btns" id="previous"><i class="fa-solid fa-chevron-left"></i></div>
      <div id="pagination-wrap">
        <ul>
        </ul>
      </div>
      <!--controls-->
    </div>
    <style>

    </style>
  </div>
</body>

htmljquerycsssliderfill

Answer №1

Here are some relatively easy steps to follow:

  1. Eliminate the width from #slider-wrap and #slider-wrap ul#slider li, as well as the max-width from #wrapper (allowing it to take up the full width).
  2. Set height: 100% for #wrapper and multiple nested elements, and use display: flex for #slider-wrap ul#slider li i.
  3. Adjust the slider widths and update the left position whenever the window size changes.

The script also includes functionality for building the slider, automatic sliding, color settings, pagination, hover effects, and more. Feel free to customize these options according to your needs.

If you encounter issues with the height of the parent element of #wrapper, ensure that it has a fixed or minimum height set. The demonstration code adding height to the html, body elements was for illustrative purposes only and can be removed in your final implementation.

Make sure to test and adjust the styles based on the requirements of the parent element to resolve any layout issues that may arise.

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

SVG design attributes

I'm attempting to add separate SVG code inline at the bottom, but I'm not sure how to do this as it's different from the usual HTML layout properties. I've placed each SVG inside a common div like this: .svg-container { wid ...

htmlcsssvg

Creating an HTML form in Django using forms.py

I created a Django web application that includes an authentication system. Within this system, I have a user registration view, a customer model, and a UserCreationForm in forms.py: class CustomerSignUpForm(UserCreationForm): first_name = forms.CharFie ...

htmldjangoauthenticationdjango-modelsdjango-forms

The form is successfully submitted by Jquery, yet the div does not fade as expected

Hey there! I've been working on a jQuery code that's giving me some trouble. Here's what I have so far: $("#myForm").submit(function(){ //alert($(this).serialize()); $.post("submit.php", $(this).serialize(), functi ...

phpjquery

Stylish curved bottom border

Is it feasible to create this footer using just CSS? https://i.sstatic.net/b33w4.png Appreciate the help! ...

cssbackgroundborder

Unexpected triggering of second fail in Jquery Deferreds

Currently, I have a sequencing function that involves two REST steps - step 1 and step 2. The way I am currently handling this is by calling step1 with fail and then handlers, followed by step2 with its own fail and then handler. self.step1() .fail(se ...

javascriptjquerypromisejquery-deferreddeferred

Make sure to use jQuery waterfall 'reflow' only once all the images have finished loading

Currently, I am utilizing jQuery waterfall to achieve a grid-style display on my website. To address the issue of images overlapping, I have enclosed the waterfall method within a .load() function like this: $(window).load(function(){ $('#buildcon ...

javascriptjqueryhtmlajaxgrid-layout

Update the div and table without waiting for a specific time interval when an event happens

Currently, I have a table within a div that includes both editing and deleting functionality for records. After deleting a record, I want the table to be automatically updated with fresh data without having to reload the page. Can someone please provide me ...

c#jqueryasp.net.netajax

Tips for capturing the text change event of a textbox within a jQuery datatable

I am currently working on a jQuery datatable that includes a textbox for the quantity field. My goal is to have the total amount calculated automatically when a value is entered into the quantity textbox. Below is the code snippet of what I have attempted ...

jquery

The Google Maps interface remains gray when initially opened

My latest project involves creating a module that reads locations from a database and displays them on a map using the Google Maps API. However, I am facing an issue where the map appears empty with only the Google logo and Max zoom button visible upon l ...

angularjshtml

Tips on solving the Navigation bar burger problem with HTML and CSS

## I am having trouble making my navigation bar responsive using HTML and CSS as the navigation burger does not appear in mobile view ## To take a look at my code on jsfiddle, click here: [jsfiddle] (https://jsfiddle.net/abhishekpakhare/nxcdso7k/1/ ...

htmlcssresponsive-designnavigationbar

Utilizing opera and applying an inset box-shadow when active

Check out this link When viewing in Chrome, the button looks great. However, when switching to Opera, the box-shadow is not visible when the button is pressed (:active). This issue only occurs when the box-shadow on the :active state is set to inset, like ...

cssopera

Flashing event triggers a modification in input value

I have a flash object that updates the value of a textarea element. I am looking for a jQuery event that will be triggered when the value of the textarea is changed by the flash object. My goal is to have a specific checkbox automatically change to a &apo ...

javascriptjqueryflash

Adjusting the size of an image within a div container alongside additional elements

How can I ensure that an image and variable text inside a div do not exceed the height of the parent div?The image should resize based on the amount of text present. In the code snippet below, the image occupies the full height of the div (30vh) with text ...

htmlcssbootstrap-4

No data being returned by $.get in Internet Explorer

I'm currently utilizing JQuery's $.get method to retrieve a twitter feed and showcase it on my website. Strangely, I am encountering an issue where no data seems to be fetched (i.e., the code within function(d) { ... } is not being executed). Thi ...

phpjqueryajaxinternet-explorerget

Create numerous elements by extracting data from an array

I have a list of items in an array and I want to create separate components for each item based on the length of the array. However, my previous attempt did not yield the desired result: let items = ["Item 1", "Item 2", "Item 3", "Item 4", "Item 5"]; let i ...

htmlreactjsjsx

How can I achieve a jQuery fade effect when hovering over an element?

I am looking for guidance on how to hide the <img /> tags within this particular structure and then fade them in upon mouseover using jQuery/css. The concept is to have the HTML <img> element hidden initially, only to smoothly fade in when hov ...

jqueryhtmlcssfadein

Tips for implementing parallax effects in an HTML form

I'm planning to incorporate parallax effects in my web application. I've already tried the link below and it's working well according to my needs. Now, I'm interested in learning how to use an HTML form instead of a background image in ...

htmlcss

Is it possible to modify the background color of the firefox address bar according to the type of protocol being used?

Is there a way to customize the background color of the address bar in Firefox according to different protocols? For example, using blue for https, orange for mixed content warning, green for ev-certificate, and red for invalid certificates. ...

cssfirefoxfirefox-addon

Unable to retrieve HTML content through a Node.js server

I created a HTML webpage that includes .css, images and JavaScript files. However, when I start my node server using the command below: app.get('/', function(req, res){ res.sendFile(__dirname + '/index.html'); }); The webp ...

javascripthtmlnode.js

The ripples can be found at the bottom of the map, not at the front

Having an issue when working with Globe where Ripple rings are always appearing on the backside of the map, rather than in front of it Referencing the source code from https://github.com/vasturiano/globe.gl/blob/master/example/random-rings/index.html and ...

javascripthtmld3.jschartsthree.js