Rich-text Reply

Adding a Carousel to a Page

sgibson 11-06-15
Accepted Solution

Adding a Carousel to a Page

Hi All

 

I want to run a test where I add a carousel to a particular page.

 

Is this possible with Optimizely?

 

Examples of the code below

 

Many Thanks

 

Here is an example HTML

 

<!-- Place somewhere in the <body> of your page -->
<div class="flexslider">
  <ul class="slides">
    <li>
      <img src="slide1.jpg" />
    </li>
    <li>
      <img src="slide2.jpg" />
    </li>
    <li>
      <img src="slide3.jpg" />
    </li>
    <li>
      <img src="slide4.jpg" />
    </li>
    <!-- items mirrored twice, total of 12 -->
  </ul>
</div>
 
and the Jquery is 
 
$(window).load(function() {
  $('.flexslider').flexslider({
    animation: "slide",
    animationLoop: false,
    itemWidth: 210,
    itemMargin: 5
  });
});
Level 2

JDahlinANF 11-06-15
 

Re: Adding a Carousel to a Page

@sgibson - Yes, this should work just fine.

In your variation's code, you would add the HTML to the page, then you would run the jQuery which turns that HTML into a slideshow.  Based on timing, you may need to move the line of code that adds the HTML to the page to also be inside "window.load".

 

Suppose you want to insert the carousel right before the "content"

$(window).load(function() {
  var theCarousel = '<div class="flexslider"><ul class="slides"><li><img src="slide1.jpg" /></li><li><img src="slide2.jpg" /></li><li><img src="slide3.jpg" /></li><li><img src="slide4.jpg" /></li></ul></div>';
  $(theCarousel).insertBefore($('.content'));
  $('.flexslider').flexslider({
    animation: "slide",
    animationLoop: false,
    itemWidth: 210,
    itemMargin: 5
  });
});
sgibson 11-09-15
 

Re: Adding a Carousel to a Page

Hi nap0leon

 

Thanks for coming back to me 

 

I am still unable to get this to work.

 

I have tried my original version 

https://www.inchcapeaudi.co.uk/retail-centres/audi-bolton/?optimizely_x3743296158=1

 

and the version you suggested 

https://www.inchcapeaudi.co.uk/retail-centres/audi-bolton/?optimizely_x3743296158=2

 

Any help would be much appreciated

 

Many Thanks

Level 2

Re: Adding a Carousel to a Page

Hi @sgibson,

 

I've had a look at your experiment and variation code and I think this might be a timing issue. When I execute your code on the page directly it adds the slider to it perfectly fine.

 

Can you try adding a function to your variation code that makes the function wait for the element to exist on your page, such as the one described in this article

 

Best,

Nils

 

P.s. thanks for replying @nap0leon!

Re: Adding a Carousel to a Page

Hi sgibson,

 

I inadvertently removed your reply when trying to remove my own incorrectly reply, sorry about that. I do have a reply for you here:

 

Looking at your code:

 

 

$("#159 > .container > div:eq(0) > div:eq(1) > div:eq(0) > div:eq(1)").replaceWith
("<!-- Place somewhere in the <body> of your page -->\n<div class=\"flexslider\">\n <ul class=\"slides\">\n <li>\n <img src=\"/~/media/9df4162ff02d4e7298ad6d7cec069659.ashx?h=180&la=en&w=243\" />\n </li>\n <li>\n <img src=\"/~/media/22b7c7757968492e996428fda7c06735.ashx?h=180&la=en&w=243\" />\n </li>\n <li>\n <img src=\"/~/media/a659cbc2445c4ed89fbffcc962dd1d08.ashx?h=180&la=en&w=243\" />\n </li>\n <li>\n <img src=\"/~/media/01c835fe60aa4aa7922c1f4d480d1225.ashx?h=180&la=en&w=243\" />\n </li>\n </ul>\n</div>");
/* Don't touch this code */
function waitForDelayedContent(selector, experiment, timeout, keepAlive) {
var intervalTime = 50;
var timeout = timeout || 3000;
var keepAlive = keepAlive || false;
var maxAttempts = timeout / intervalTime;
var attempts = 0;
var elementsCount = 0;
var interval = setInterval(function() {
if ($(selector).length > elementsCount) {
if (!keepAlive) {
clearInterval(interval);
}
experiment();
elementsCount = $(selector).length;
} else if (attempts > maxAttempts) {
clearInterval(interval);
}
attempts ++;
}, intervalTime);
}
/* --------------------------------------------- */
waitForDelayedContent(".flexislider", function(){
$(window).load(function() { $('.flexslider').flexslider({ animation: "slide", animationLoop: false, itemWidth: 210, itemMargin: 5 });
}); });

 

 

There are three things we still need to change here:

 

1. The class flexislider is misspelled in this line: 

waitForDelayedContent(".flexislider", function(){

 

2. The function flexslider doesn't exist in Optimizely's jQuery, so to have Optimizely know that you need to use your own jQuery, you'll need to scope the function it to the window-level. You can do this by prepending window. to the function in this line of code: 

window.$('.flexslider').flexslider({

 

3. The flexslider() function is wrapped in a $(window).load(), which makes the function only execute on pageload. The page has already loaded, so this code won't execute. You'll need to remove that function so it always executes, and not just on page load.

 

I hope this helps!

 

Best,

Nils

sgibson 11-11-15
 

Re: Adding a Carousel to a Page

Hi Nils

 

Thanks for your reply.

 

I did spot the spelling mistake and the window.load function (after I posted) and corrected this.

 

The 

window.$('.flexslider').flexslider({

was the thing I was missing.

 

It is now loading on the page

 

(I just need to style it now)

 

Many Thanks

Stephen

 

Level 2