CODEWITHSUNDEEP
jquerycss
user4409899
user4409899

Reputation:

Why is there a white space in unslider on the left and top?

I am using slider named unslider. the slider is working fine but there is one thing that is annoying me a lot. There is a white space on the left during the first slide. Also there is space on the top during rest of the slides.

Here is my slider: http://jsfiddle.net/132xmhbd/ You can also run the snippet!

.banner {
  position: relative;
  overflow: auto;
  width: 100vw;
  border: 1px solid black;
}
.banner li {
  list-style: none;
  width: 100vw;
  height: 200px;
}
.banner ul li {
  float: left;
  width: 100%;
}
.dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -5px;
  text-align: center;
}
.dots li {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin: 0 4px;
  text-indent: -999em;
  border: 2px solid #fff;
  border-radius: 6px;
  cursor: pointer;
  opacity: .4;
  -webkit-transition: background .5s, opacity .5s;
  -moz-transition: background .5s, opacity .5s;
  transition: background .5s, opacity .5s;
}
.dots li.active {
  background: #fff;
  opacity: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://unslider.com/unslider.min.js"></script>

<div class="banner">
  <ul>
    <li style="background: pink;">This is a slide.</li>
    <li style="background: lightgreen;">This is another slide.</li>
    <li>This is a final slide.</li>
  </ul>
</div>

<script>
  $(function() {
    $('.banner').unslider({
      dots: true,
      fluid: true,
    });
  });
</script>

Upvotes: 0

Views: 870

Answers (5)

Jason Bassett
Jason Bassett

Reputation: 1291

Added .banner ul{padding: 0;margin: 0;}

.banner { 
	position: relative; 
	overflow: auto;
	width: 100vw;
	border:1px solid black;
 }
.banner li { 
	list-style: none;
	width: 100vw;
	height: 200px;
 }
.banner ul li { float: left; width: 100%;}
.banner ul { padding: 0; margin: 0; }

.dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -5px;
  text-align: center;
}

.dots li {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin: 0 4px;
  text-indent: -999em;
  border: 2px solid #fff;
  border-radius: 6px;
  cursor: pointer;
  opacity: .4;
  -webkit-transition: background .5s, opacity .5s;
  -moz-transition: background .5s, opacity .5s;
  transition: background .5s, opacity .5s;
}

.dots li.active {
  background: #fff;
  opacity: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://unslider.com/unslider.min.js"></script>
<div class="banner">
      <ul>
        <li style="background: pink;">This is a slide.</li>
        <li style="background: lightgreen;">This is another slide.</li>
        <li>This is a final slide.</li>
     </ul>
  </div>

<script>
    $(function() {
        $('.banner').unslider({
            dots: true,
            fluid:true,
        });
    });
</script>

Upvotes: 0

Ballard
Ballard

Reputation: 899

I've came up with one solution for the left white space, set:

.banner ul {
    list-style:none;
    padding-left:0;
    margin: 0;
}

to remove the indentation of the list element

Upvotes: 1

Lu&#237;s P. A.
Lu&#237;s P. A.

Reputation: 9739

You can achive this by setting padding and margin to 0 in the <ul> and <li>

.banner {
  position: relative;
  overflow: auto;
  width: 100vw;
  border: 1px solid black;
}
.banner li {
  list-style: none;
  width: 100vw;
  height: 200px;
}
.banner ul , li {
  margin:0;
  padding:0;
}

.banner ul li {
  float: left;
  width: 100%;
}
.dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -5px;
  text-align: center;
}
.dots li {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin: 0 4px;
  text-indent: -999em;
  border: 2px solid #fff;
  border-radius: 6px;
  cursor: pointer;
  opacity: .4;
  -webkit-transition: background .5s, opacity .5s;
  -moz-transition: background .5s, opacity .5s;
  transition: background .5s, opacity .5s;
}
.dots li.active {
  background: #fff;
  opacity: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://unslider.com/unslider.min.js"></script>

<div class="banner">
  <ul>
    <li style="background: pink;">This is a slide.</li>
    <li style="background: lightgreen;">This is another slide.</li>
    <li>This is a final slide.</li>
  </ul>
</div>

<script>
  $(function() {
    $('.banner').unslider({
      dots: true,
      fluid: true,
    });
  });
</script>

Upvotes: 1

Kunjan Thadani
Kunjan Thadani

Reputation: 1670

Here is a working FIDDLE. Put this CSS in your code:

.banner ul{
    margin:0px;
    padding:0px;
}

Upvotes: 0

Jim
Jim

Reputation: 743

remove the margin and padding from .banner ul

.banner ul { padding: 0; margin: 0; }

Upvotes: 1

Related Questions