Clever Geek Handbook

Trying to get a dynamic slideshow. There is NO fixed height on the container. See the violin

I am trying to get the text "WE CREATE THE DANCE" "WE FIND" "WE LOOK WELL" to be inside a container that will adjust based on the size of the text and the number of lines of text. The size of the container is unknown because it is dynamic. I cannot add height to this .slide container. I would like the container to adjust according to the size of the text. If I choose position: absolute from the children, the text is the way I want ... however, it breaks the slideshow. So it won't work. I chose this slideshow code because it was very small. So I would like to keep it small and only add some lines of code. I don't want to add the whole structure. I am using jquery and would like to keep this.

You will now see the slideshow text overlap with the text below it. I am trying to push the bottom text down.

http://jsfiddle.net/9xn19111/16/

Thanks in advance for your help. Hope I can finally get this working :)

<div class="slider">
<div class="slider-item intro secondary">WE CREATE DANCE</div>
<div class="slider-item intro secondary">WE HAVE FUN</div>
<div>

-

var InfiniteRotator = {
init: function() {
    //initial fade-in time (in milliseconds)
    var initialFadeIn = 1000;

    //interval between items (in milliseconds)
    var itemInterval = 5000;

    //cross-fade time (in milliseconds)
    var fadeTime = 500;

    //count number of items
    var numberOfItems = $('.slider-item').length;

    //set current item
    var currentItem = 0;

    //show first item
    $('.slider-item').eq(currentItem).fadeIn(initialFadeIn);

    //loop through the items        
    var infiniteLoop = setInterval(function() {
        $('.slider-item').eq(currentItem).fadeOut(fadeTime);

        if (currentItem == numberOfItems - 1) {
            currentItem = 0;
        } else {
            currentItem++;
        }
        $('.slider-item').eq(currentItem).fadeIn(fadeTime);

    }, itemInterval);
}
}

$(document).ready(function() { //start after HTML, images have loaded

// check if there is one image or more
if($('.slider > div').length > 1){
    // run slider
    InfiniteRotator.init();

}else{
    // just one image don't slide
    alert('just one image');
    $('.slider-item').eq(0).fadeIn();
}

});
+3


source to share


4 answers


The clean way, in my opinion, is with CSS:



var InfiniteRotator = {
    init: function() {

        //interval between items (in milliseconds)
        var itemInterval = 5000;
      
        //loop through the items        
        var infiniteLoop = setInterval(function() {
            var current = $(".slider-item.visible").removeClass('visible');

            var next = current.next();
            next = next.length ? next : current.siblings().first();
            next.addClass('visible');
          
        }, itemInterval);
    }
}

$(document).ready(function() { //start after HTML, images have loaded
  
    // check if there is one image or more
    if($('.slider > div').length > 1){
        // run slider
        InfiniteRotator.init();
    }
});
      

        
        
        
      

    
.slidermwtext {
    margin-top: 50px;
}

.slider-item {
    position: absolute;
    top: 8px;
    left: 0;
    text-align: center;
    width: 100%;
    opacity: 0;
    -webkit-transition: opacity 0.5s ease-in-out;
    -moz-transition: opacity 0.5s ease-in-out;
    -o-transition: opacity 0.5s ease-in-out;
    transition: opacity 0.5s ease-in-out;
}

.slider-item.visible {
    position: static;
    opacity: 1;
}
      

        
        
        
      

    
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slider">
    <div class="slider-item intro secondary visible">WE CREATE DANCE</div>
    <div class="slider-item intro secondary">WE HAVE<br> FUN</div>
    <div class="slider-item intro secondary">WE LOOK GOOD</div>
</div>

 <p class="slidermwtext"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut. </p>
Run codeHide result


+1


source


I think this is what you mean ,

If I understand you correctly, you need to set the height in the class slider-item

to height: auto;

and remove the "position: absolute:



slider-item {
display: none;

    width: 100%;
    height: auto;
text-align: center;
}

But you will notice that yours fadeIn

starts too early in the new text, this is because you need to pass a function callback function

to a function fadeOut()

that is called when the animation finishes. I'll update the fiddle to show you this additional addition.

0


source


Update your markup, try Demo

<div class="slidermwtext"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore<div class="slider">
    <div class="slider-item intro secondary">WE CREATE DANCE</div>
    <div class="slider-item intro secondary">WE HAVE FUN</div>
    <div class="slider-item intro secondary">WE LOOK GOOD</div>
</div>

  magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut. </div>
0


source


Here is the solution for your problem.

JQuery

$('.slider-item').eq(currentItem).delay(510).fadeIn(fadeTime);

CSS

.slider-item {
    font-size: 22px;
    display: none;
    position: relative;
        width: 100%;
        height: 100px;
    text-align: center;
}

Check Fiddle HERE.

0


source






More articles:


All Articles