CODEWITHSUNDEEP
javascriptjqueryhtmlcss
kimberlyvoo
kimberlyvoo

Reputation: 197

Trying to get dynamic slideshow text. NO fixed height on container. See fiddle

I'm trying to get the text "WE CREATE DANCE" "WE HAVE FUN" "WE LOOK GOOD" to be inside a container that will adjust depending 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 can't add a height to this container .slide. I would like the container to adjust according to the text size. If I take out the position: absolute from the child elements, the text is how I want it...however, doing this breaks the slideshow. So that will not work. I have picked 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 an entire framework. I am using jquery and would like to keep that in.

You will see now that the slideshow text overlaps with the text underneath it. I am trying to push the bottom text down.

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

Thanks in advance for your help. I 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();
}

});

Upvotes: 3

Views: 141

Answers (4)

Drazen Bjelovuk
Drazen Bjelovuk

Reputation: 5472

A cleaner way in my opinion using 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>

Upvotes: 1

ketan
ketan

Reputation: 19341

Here is the solution for your issue.

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.

Upvotes: 0

stanze
stanze

Reputation: 2480

Have updated your markup, Try this 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>

Upvotes: 0

hammus
hammus

Reputation: 2612

I think this is what you mean,

If Im understanding you correctly, you need to set your height on your slider-item class to height: auto; and remove `position: absolute:

slider-item {
display: none;

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

But you'll notice that your fadeIn on the new text triggers too early, this is because you need to pass a callback function to the fadeOut() function that is called when the animation completes. I'll update the fiddle in a moment to show you this extra addition.

Upvotes: 0

Related Questions