如何让这个滑块填充其容器并使其居中于容器

问题描述 投票：0回答：1

我对此滑块代码进行了调整，它很完美，但我想将其放置在 SquareSpace 上的代码块中。我希望让滑块填充代码块的容器并居中，而不是仅 600x400 并左对齐。如果有更简单的方法来实现我正在寻找的东西，我洗耳恭听！

//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
1个回答
0
投票

相对容易：

  1. 从 
    width
    和 
    #slider-wrap
    中删除 
    #slider-wrap ul#slider li
    ，以及从 
    max-width
    中删除 
    #wrapper
    （允许采用全宽度）。
  2. 为 
    height: 100%
    和多个嵌套元素设置 
    #wrapper
    ，为 
    display: flex
    设置 
    #slider-wrap ul#slider li i
    。
  3. 每当窗口大小发生变化时，更新滑块宽度并刷新 
    left
    位置。

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

您可能对 

#wrapper
的父母的身高有疑问。它应该有一个固定的或最小的高度。

这部分代码是出于演示目的而添加的（需要删除），因为 

body
是代码片段中包装器的直接父级：

html, body {
  height: 100%;
}

尝试在最终样式中删除此 

html, body
规则，看看它是否有效。

如果没有 - 那么，根据包装器父级的样式和要求，使用以下选项之一：

  • display: flex;
    为 
    #wrapper
    的父级。
  • position: absolute; left: 0; right: 0; top: 0; bottom: 0;
    对于 
    #wrapper
    。
  • 其他选项。
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.