Align list item under list using css to create jquery slider

Question

I have the following code which create very simple slider.
HTML:

CSS:

    * {margin: 0; padding: 0; border: 0 none; outline: 0; font-size: 100%; text-decoration: none; color: inherit; word-wrap: break-word; font-family: "Helvetica Neue",Arial,Helvetica,Geneva,sans-serif;}

    #slidebox {
    display: block;
    position: static;
    width: 50%;
    background: red;
    margin: 0 auto;
    list-style: none;
    }

    .slideholder {
    display: none;
    overflow: hidden;
    width: 50%;
    background: #000000; 
    position: absolute;
    float: left;
    opacity: 0;
    z-index: 10;
    }
    .slideholder:first-child { opacity: 1; z-index:11; display: block;}

.imgstyle { float: left; outline: none; height: 100%; width: 100%; z-index: 777; }

    .slidetext {
    overflow: hidden;
    display: block;
    position: relative;absolute; 
    bottom: 20%;
    left: 0px;
    width: 97%; 
    height: 25%; 
    background: rgba(30,40,55,.7); 
    color: #FFFFFF; 
    padding: 1% 1.5%;
    z-index: 999;
    }
    .slideAnim {
    -webkit-transition: all 2s ease-out;
    -moz-transition: all 2s ease-out;
    -o-transition: all 2s ease-out;
    transition: all 2s ease-out;
    }

    a.control_prev, a.control_next {
      position: relative;
      z-index: 9999;
      display: block;
      padding: 1% .5%;
      width: auto;
      height: auto;
      background: #DFDFDF;
      color: #fff;
      text-decoration: none;
      font-weight: 600;
      font-size: 18px;
      opacity: 0.8;
      cursor: pointer;
    }
    a.control_prev:hover, a.control_next:hover { opacity: 1; }
    a.control_prev { float: left; }
    a.control_next { float: right; }

jQuery:

jQuery(document).ready(function () {

var currentPosition = 0;
var numberOfSlides = $(".slideholder").length;
var speed = 6000;
$('.slideholder').addClass("slideAnim");

setInterval(changePosition, speed);

function changePosition() 
{ 
    if(currentPosition == numberOfSlides - 1) { currentPosition = 0; } 
    else { currentPosition++; } 
    moveSlide(); 
}

function moveSlide() 
{
    $('.slideholder').eq(currentPosition).fadeTo(900,1); 
    $('.slideholder').eq(currentPosition-1).fadeTo(500,0);
}

});

here is my code sample, but i think image is not loading in jsfiddle
https://jsfiddle.net/4jueaz85/6/
Here is Updated link(please wait untill imade is load -for slow internet connection) : https://jsfiddle.net/4jueaz85/13/

I want to:
1. Place Anchor tags(act as next-prev. button) in center-left and center-right position in 'list'. Like,
<< [slide] >>
2. Place text over image. 3. show 1st image at starting time.
BUT, design should be responsive.

Jerry · Accepted Answer

I edited your fiddle here: https://jsfiddle.net/cy7d6v4u/

I didn't have time to get the javascript working, but here's a format for your HTML and CSS:

CSS & HTML Edits Your big issue here was needing to be able to get the height of the box. When you float the LI elements the UL doesn't have a height. So, I didn't float the LI elements, but used absolute positioning. Then, so the main UL can have a height, I added a relatively positioned image at the end of the html list (just duplicate any of them) and set it to opacity: 0 and a z-index of -1. This sets the height of the UL (which we can then set for relative position). All this lets us use absolute positioning on your prev/next links and a top: % so it's responsive.

Whew. So, here's the new HTML with the relatively positioned last element in the list:

And here's the CSS (some could still be taken out and improved, but this is working):

* {
    margin: 0; 
    padding: 0; 
    border: 0 none; 
    outline: 0; 
    font-size: 100%; 
    text-decoration: none; 
    color: inherit; 
    word-wrap: break-word; 
    font-family: "Helvetica Neue",Arial,Helvetica,Geneva,sans-serif;
}
.imgstyle { 
    outline: none; 
    height: 100%; 
    width: 100%; 
    z-index: 777; 
}
#slidebox {
display: block;
position: relative;
width: 100%;
background: red;
margin: 0 auto;
list-style: none;
}
.slideholder {
display: none;
overflow: hidden;
width: 100%;
background: #000000; 
position: absolute;
opacity: 0;
z-index: 10;
}
.slideholder:first-child { 
    opacity: 1; 
    z-index:11; 
    display: block; 
}
.slidetext {
overflow: hidden;
display: block;
position: absolute; 
bottom: 0; 
left: 0;
right: 0;
width: 100%;
background: rgba(30,40,55,.7); 
color: #FFFFFF; 
padding: 1% 1.5%;
z-index: 999;
}
.slideAnim {
-webkit-transition: all 2s ease-out;
-moz-transition: all 2s ease-out;
-o-transition: all 2s ease-out;
transition: all 2s ease-out;
}

a.control_prev, a.control_next {
  position: absolute;
  z-index: 9999;
  display: block;
  padding: 1% .5%;
  background: #DFDFDF;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  font-size: 18px;
  opacity: 0.8;
  cursor: pointer;
  top: 30%;
  left: 0;
}

a.control_next {
    left: auto;
    right: 0;
}
a.control_prev:hover, a.control_next:hover { opacity: 1; }

.set-slide-height { /* This gives #slidebox height */
    position: relative;
    z-index: -1;
}

Align list item under list using css to create jquery slider

Answers (1)

Related Questions