Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by rmax lee
rmax lee
495 Points

Changing background color as flexslider slides

l goa a flexslider in a div that l want to change the color when it slides in with a new element. Code the following code working

        $(document).ready(function () {

    var $backgroundimages = ["#bbebdd", "#F7C00D"];
    var $backgroundcount = 0;

    function fade($ele) {
        $ele.fadeTo(1000, 0, function(){
        $ele.css('background-color', backgroundimages);
        $backgroundcount++;
        }).fadeTo(1000, 1.0, function () {
            if ($backgroundcount >= $backgroundimages.length) {
                $backgroundcount = 0;
            };
            setTimeout(function(){
                fade($ele);
            }, 5000);
        });
    };

    fade($('.section-2 .article-block').first());
});

for the html code below

<div class="article-block">
     <div class="row">
     <div class="large-12 columns">

          <div class="article-out">
          <div class="flexslider flexslider1">


          <div class="flex-viewport" style="overflow: hidden; position: relative;"><ul class="slides" style="width: 800%; transition-duration: 0.6s; transform: translate3d(-3600px, 0px, 0px);"><li class="clone" style="width: 1200px; float: left; display: block;">
          <article>
          <div class="aside-out">
          <div class="aside-in">
          <aside>
          <h1><span>Ian williams.</span></h1>

          <h2><span>Managing partner.</span></h2>

          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tristique libero at convallis tempor. Praesent eu portav nibh. In suscipit eget augue et luctus. Cras in eros non libero pulvinar dictum. </p>
          </aside>
          </div>
          </div>

          <figure><img src="http://partnerwise:8888/wp-content/themes/Partnerwise/images/partnerwise-photo01.png" alt="Photo"></figure>
          </article>
          </li>
          <li class="flex-active-slide" style="width: 1200px; float: left; display: block;">
          <article>
          <div class="aside-out">
          <div class="aside-in">
          <aside>
          <h1><span>Ian williams.</span></h1>

          <h2><span>Managing partner.</span></h2>

          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tristique libero at convallis tempor. Praesent eu portav nibh. In suscipit eget augue et luctus. Cras in eros non libero pulvinar dictum.</p>
          </aside>
          </div>
          </div>

          <figure><img src="http://partnerwise:8888/wp-content/themes/Partnerwise/images/partnerwise-photo01.png" alt="Photo"></figure>
          </article>
          </li>

          <li class="" style="width: 1200px; float: left; display: block;">
          <article>
          <div class="aside-out">
          <div class="aside-in">
          <aside>
          <h1><span>Ian williams.</span></h1>

          <h2><span>Managing partner.</span></h2>

          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tristique libero at convallis tempor. Praesent eu portav nibh. In suscipit eget augue et luctus. Cras in eros non libero pulvinar dictum. </p>
          </aside>
          </div>
          </div>

          <figure><img src="http://partnerwise:8888/wp-content/themes/Partnerwise/images/partnerwise-photo01.png" alt="Photo"></figure>
          </article>
          </li>
          <li class="clone" style="width: 1200px; float: left; display: block;">
          <article>
          <div class="aside-out">
          <div class="aside-in">
          <aside>
          <h1><span>Ian williams.</span></h1>

          <h2><span>Managing partner.</span></h2>

          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tristique libero at convallis tempor. Praesent eu portav nibh. In suscipit eget augue et luctus. Cras in eros non libero pulvinar dictum.</p>
          </aside>
          </div>
          </div>

          <figure><img src="http://partnerwise:8888/wp-content/themes/Partnerwise/images/partnerwise-photo01.png" alt="Photo"></figure>
          </article>
          </li></ul></div><ol class="flex-control-nav flex-control-paging"><li><a class="flex-active">1</a></li><li><a class="">2</a></li></ol><ul class="flex-direction-nav"><li><a class="flex-prev" href="#">Previous</a></li><li><a class="flex-next" href="#">Next</a></li></ul></div>
          </div>

     </div>
     </div>
     </div>

But the slider doesn't seem to be coherent as either the slider slides before the color fades or the color fades in before the slider slides. Anyway that l can do this properly, like tying it the color changes in with flexslider?

Any ideas?

1 Answer

Kevin Korte
Kevin Korte
28,149 Points
Kevin Korte
Kevin Korte
28,149 Points

It looks like you're trying to time the background color change with the flexslider, which as you can see is tricky. I'd instead use one of the callback functions included with flexslider, (probably the before callback) to initiate the color change, that way your timing should be exact.

Follow this link: https://github.com/woothemes/FlexSlider/wiki/FlexSlider-Properties

Down towards the bottom of the list, look at the before property.

rmax lee
rmax lee
495 Points

Thanks sounds good is that but still struggling to select a property to bind it to. At the minute l got the below code:

    $('.flexslider1').flexslider({
    animation: "move",
    slideshow: true,
    slideshowSpeed: 5000,
    animationSpeed: 600,
    start: function(slider){
    $('body').removeClass('loading');
},  after: function(e){
    var array = ["#bbebdd", "#F7C00D"];
    var counter = 0;
    var nextColor;
        counter = (counter + 1) % array.length;
        console.log (e);
        nextColor = array[counter];
        $(".section-2 .article-block ").css("background-color", nextColor);
    }
    });