Home / Questions / 178920
Accepted
Ceci Benitez
Asked: 2020-07-10 06:00:37 +0800 CST 2020-07-10 06:00:37 +0800 CST

How to remove white space from caroufredsel when it moves?

  • 772

I am using this Caroufredsel plugin but it leaves me a blank space on the right every time it does a slide, and I would like one image to go right after the other.

This is my html, css and js code:

jQuery(document).ready(function() {
  "use strict"

  $('#slider-carousel').caroufredsel({
    responsive: true,
    width: '100%',
    circular: true,
    align: 'center',

    scroll: {
      items: 1,
      pauseOnHover: true,
      duration: 1000,
      pauseOnHover: true,
      timeoutDuration: 3000,
      onBefore: function() {
        $('ul#slider-carousel li')
          .animate({
            opacity: 0.5
          }, 250);
      },
      onAfter: function() {
        $('ul#slider-carousel li')
          .filter(':eq(1)')
          .animate({
            opacity: 1
          }, 250);
      }
    },

    auto: true,

    items: {
      visible: {
        min: 1,
        max: 1,

      },
      start: -1,

      height: "variable"
    },
    pagination: {
      container: ".sliderpager",
      anchorBuilder: false
    }
  });
});
/*slider*/

.container {
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
  box-sizing: content-box;
  height: 100%;
  width: 100%;
}

.slider {
  margin-top: 55px;
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
  box-sizing: content-box;
  height: 100%;
  width: 100%;
}

.container .body-content {
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
  box-sizing: content-box;
  height: 100%;
  width: 100%;
}

.slider ul.slider-carousel {
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
  box-sizing: content-box;
  height: 100%;
  width: 100%;
}

.caroufredsel_wraper {
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
  box-sizing: content-box;
  height: 100%;
  width: 100%;
}

.slider,
.slider ul.slider-carousel,
.slider ul.slider-carousel li {
  height: 100%;
  width: 100%;
  text-align: center;
  color: #FFF;
}

.slider ul.slider-carousel li h3 {
  margin-top: 150px;
  margin-bottom: 30px;
  color: #FFF;
}

.slider ul.slider-carousel li p {
  margin-bottom: 20px;
}

.img1 {
  background: url('https://placehold.it/500x300/ff0000');
  background-size: 100% 100%;
}

.img2 {
  background: url('https://placehold.it/500x300/00ff00');
  background-size: 100% 100%;
}

.img3 {
  background: url('https://placehold.it/500x300/0000ff');
  background-size: 100% 100%;
}

.slider ul.sliderpager li.selected a {
  color: #E74C3C;
}

.slider ul.sliderpager li a {
  color: #34495E;
}

.slider ul.sliderpager li {
  padding: 0 3px;
  height: 28px;
  line-height: 28px;
  display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.caroufredsel/6.2.1/jquery.carouFredSel.packed.js"></script>

<!-- slider -->
<div class="slider" id="slider">
  <ul class="slider-carousel" id="slider-carousel">
    <li class="img1">
      <h3></h3>
      <p></p>
    </li>
    <li class="img2">
      <h3></h3>
      <p></p>
    </li>
    <li class="img3">
      <h3></h3>
      <p></p>
    </li>
  </ul>
  <ul class="sliderpager">
    <li><a href="#"><i class="fa fa-circle"></i></a></li>
    <li><a href="#"><i class="fa fa-circle"></i></a></li>
    <li><a href="#"><i class="fa fa-circle"></i></a></li>
  </ul>
</div>

javascript

2 Answers

  1. Best Answer

    The problem is that the carousel elements are li displayed as a block and that's why they don't allow an element in parallel with them. One possible solution would be to make them lifloat. To do this, all you have to add to your CSS is this:

    .slider, .slider ul.slider-carousel, .slider ul.slider-carousel li {
   float: left;
}

    And you will no longer see the white space between slides. Here you can see it working:

    jQuery(document).ready(function() {
  "use strict"

  $('#slider-carousel').caroufredsel({
    responsive: true,
    width: '100%',
    circular: true,
    align: 'center',

    scroll: {
      items: 1,
      pauseOnHover: true,
      duration: 1000,
      pauseOnHover: true,
      timeoutDuration: 3000,
      onBefore: function() {
        $('ul#slider-carousel li')
          .animate({
            opacity: 0.5
          }, 250);
      },
      onAfter: function() {
        $('ul#slider-carousel li')
          .filter(':eq(1)')
          .animate({
            opacity: 1
          }, 250);
      }
    },

    auto: true,

    items: {
      visible: {
        min: 1,
        max: 1,

      },
      start: -1,

      height: "variable"
    },
    pagination: {
      container: ".sliderpager",
      anchorBuilder: false
    }
  });
});
    .slider, .slider ul.slider-carousel, .slider ul.slider-carousel li {
   float: left;
}

/*slider*/

.container {
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
  box-sizing: content-box;
  height: 100%;
  width: 100%;
}

.slider {
  margin-top: 55px;
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
  box-sizing: content-box;
  height: 100%;
  width: 100%;
}

.container .body-content {
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
  box-sizing: content-box;
  height: 100%;
  width: 100%;
}

.slider ul.slider-carousel {
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
  box-sizing: content-box;
  height: 100%;
  width: 100%;
}

.caroufredsel_wraper {
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
  box-sizing: content-box;
  height: 100%;
  width: 100%;
}

.slider,
.slider ul.slider-carousel,
.slider ul.slider-carousel li {
  height: 100%;
  width: 100%;
  text-align: center;
  color: #FFF;
}

.slider ul.slider-carousel li h3 {
  margin-top: 150px;
  margin-bottom: 30px;
  color: #FFF;
}

.slider ul.slider-carousel li p {
  margin-bottom: 20px;
}

.img1 {
  background: url('https://placehold.it/500x300/ff0000');
  background-size: 100% 100%;
}

.img2 {
  background: url('https://placehold.it/500x300/00ff00');
  background-size: 100% 100%;
}

.img3 {
  background: url('https://placehold.it/500x300/0000ff');
  background-size: 100% 100%;
}

.slider ul.sliderpager li.selected a {
  color: #E74C3C;
}

.slider ul.sliderpager li a {
  color: #34495E;
}

.slider ul.sliderpager li {
  padding: 0 3px;
  height: 28px;
  line-height: 28px;
  display: inline-block;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.caroufredsel/6.2.1/jquery.carouFredSel.packed.js"></script>

<!-- slider -->
<div class="slider" id="slider">
  <ul class="slider-carousel" id="slider-carousel">
    <li class="img1">
      <h3></h3>
      <p></p>
    </li>
    <li class="img2">
      <h3></h3>
      <p></p>
    </li>
    <li class="img3">
      <h3></h3>
      <p></p>
    </li>
  </ul>
  <ul class="sliderpager">
    <li><a href="#"><i class="fa fa-circle"></i></a></li>
    <li><a href="#"><i class="fa fa-circle"></i></a></li>
    <li><a href="#"><i class="fa fa-circle"></i></a></li>
  </ul>
</div>

    • 1

  2. Looking through the documentation of the library Caroufredsel, I found an example that could help you and that avoids blank spaces, I followed the steps of the example and tried to adapt it to your specification, I hope it helps you

    jQuery(document).ready(function() {
  "use strict"

  $('#carousel').carouFredSel({
    responsive: true,
    items: {
      visible: 1,
      width: 900,
      height: 500
    },
    scroll: {
      duration: 250,
      timeoutDuration: 2500,
      fx: 'uncover-fade'
    },
    pagination: '#pager'
  });

});
    html,
body {
  height: 100%;
  padding: 0;
  margin: 0;
}

body {
  background: #fff;
  min-height: 600px;
}

body * {
  font-family: Arial, Geneva, SunSans-Regular, sans-serif;
  font-size: 14px;
  color: #666;
  line-height: 22px;
}

#wrapper {
  width: 100%;
  min-width: 900px;
  height: 500px;
  margin: -250px 0 0 0;
  position: absolute;
  top: 50%;
  left: 0;
}

#carousel div {
  height: 500px;
  float: left;
}

#carousel img {
  min-width: 100%;
  min-height: 100%;
}

#title {
  text-align: center;
  width: 100%;
  margin-top: -10px;
  position: absolute;
  top: 50%;
}

#title h3 {
  text-shadow: 0 3px 3px rgba( 0, 0, 0, 0.3), 0 -3px 3px rgba( 0, 0, 0, 0.3), 3px 0 3px rgba( 0, 0, 0, 0.3), -3px 0 3px rgba( 0, 0, 0, 0.3);
  font-size: 50px;
  font-weight: bold;
  line-height: 50px;
  color: #fff;
  margin: 0;
}

#title a {
  color: #fff;
}

#title a:hover {
  background: rgba( 0, 0, 0, 0.5);
  padding: 2px 5px;
}

#pager {
  border-radius: 20px;
  background: #fff;
  text-align: center;
  width: 120px;
  height: 50px;
  padding-top: 2px;
  margin: 235px 0 0 -60px;
  position: absolute;
  top: 50%;
  left: 50%;
}

#pager a.selected span {
  background: #666;
}

#pager a {
  display: inline-block;
  padding: 5px;
}

#pager span {
  border-radius: 10px;
  background: #ccc;
  text-indent: -100px;
  line-height: 0;
  display: inline-block;
  width: 10px;
  height: 10px;
  overflow: hidden;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.caroufredsel/6.2.1/jquery.carouFredSel.packed.js"></script>

<div id="wrapper">
  <div id="carousel">
    <div><img src="https://placehold.it/500x300/ff0000" /></div>
    <div><img src="https://placehold.it/500x300/00ff00" /></div>
    <div><img src="https://placehold.it/500x300/0000ff" /></div>
  </div>
  <div id="pager"></div>
</div>

    The above code does the sliders but with div not with list , but it might be an interesting idea and it would solve your problem.

    If you want more example mita this LINK

    • 0