DEVHIDE
Login Or Sign up

How to make this slider fill its container and centre it to the container

58 Views Asked by At

I made adjustments to this code for a slider and it's perfect but I want to place it in a code block on SquareSpace. I was hoping to have the slider fill the container of the code block and be centre rather than only 600x400 and left aligned. If there's an easier way to attain what I'm looking for I'm all ears!

//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>

html jquery css slider fill
Original Q&A
1

There are 1 best solutions below

1
hedfol On

It's relatively easy to:

  1. Remove the width from #slider-wrap and #slider-wrap ul#slider li as well as max-width from #wrapper (allows to take the full width).
  2. Set height: 100% for #wrapper and multiple nested elements, display: flex for #slider-wrap ul#slider li i.
  3. Update the slider widths and refresh the left position whenever the window size changes.

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

$(document).ready(function() {
  /*****************
     BUILD THE SLIDER
    *****************/
  updateSliderWidth();

  $(window).on('resize', function() {
    updateSliderWidth();
  });

  //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

/***********
 SLIDER WIDTH
************/
function updateSliderWidth() {
  sliderWidth = $("#slider-wrap").width();

  const slider = $("#slider-wrap ul#slider");
  //set width to be 'x' times the number of slides
  slider.width(sliderWidth * totalSlides)

  slider.css("left", -(sliderWidth * pos));

  slider.find("li").width(sliderWidth);
}

/***********
 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;
}


/* FOR SNIPPET DEMONSTRATION PURPOSES ONLY 
 REMOVE OR CHANGE TO #wrapper PARENT STYLES */
html, body {
  height: 100%;
}
/* ======================================== */


#wrapper {
  position: relative;
  margin: 0 auto;
  height: 100%;
}

#slider-wrap {
  display: flex;
  height: 100%;
  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;
  height: 100%;
}

#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;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  height: 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>

<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>
</div>

You might have an issue with the height of #wrapper's parent. It should have a fixed or minimal height.

This part of code was added for demonstration purposes (needs to be removed), since body is direct parent of a wrapper in the snippet:

html, body {
  height: 100%;
}

Try to remove this html, body rule in your final styles and see if it works.

If it doesn't - then, depending on the styles and requirements of wrapper's parent, use one of the following:

  • display: flex; for parent of the #wrapper.
  • position: absolute; left: 0; right: 0; top: 0; bottom: 0; for the #wrapper.
  • Additional options.

Related Questions in HTML

Related Questions in JQUERY

Related Questions in CSS

Related Questions in SLIDER

Related Questions in FILL

Trending Questions

Popular # Hahtags

javascript python java c# php android html jquery c++ css ios sql mysql r reactjs

Popular Questions

.

Copyright © 2021 Jogjafile Inc.