2SexyContent with Owl Carousel?

Aug 11, 2014 at 10:56 PM
Edited Aug 11, 2014 at 10:57 PM
Wow, great module!

I am wondering if it is possible to build a 2sxc App using a JQuery plugin such as Owl Carousel to slide through 2sxc list items? I tried to do this, placing the owl div after the repeat tag, but it's not working. Would there be any reason these two won't play well together?

http://owlgraphic.com/owlcarousel/index.html#how-to

Thanks!
Aug 11, 2014 at 11:08 PM
what was the issue you are having

I had no issues creating various kinds of owl carousels using c# razor templates
Aug 12, 2014 at 6:43 AM
@grayspace
This should be very easy. If it fails, something is wrong with the resulting HTML (since the carousel knows nothing about 2sxc, it just gets HTML). I'm guessing you're forgetting to initialize something or the HTML is somehow messed up. My suggestion:

Create a template that has NO data binding, just some dummy-data directly in the template, like
<div><img src="..."></div>
<div><img src="..."></div>
get this to work first, so you know that the HTML & JS are correct. Otherwise you have trouble figuring out what component fails. Only when this works, start adding data binding, so it will be a bit like this
<div><img src="/Portals/..."></div>
<div><img src="/Portals/..."></div>
<repeat>
    <div><img src="[Content:Image]"></div>
</repeat
...or the razor equivalent. This will help you compare the HTML output between the working items and the failing items.

When all works, remove the dummy-data.

Have fun!
Aug 12, 2014 at 2:55 PM
Edited Aug 12, 2014 at 2:57 PM
Thanks for the help @iJungleBoy. I may actually be trying to do something Owl Carousel isn't designed to do.

I'd like to make it so that one owl "item" includes other divs inside the carousel "item" div, like this:
<div class="container">
    <img src="quote-graphic.png" />
    <h2>CUSTOMER TESTIMONIALS</h2>
        <repeat>
            <div class="item row">
                <div class="col-md-5 column">
                    <p>[Content:Left_Testimonial]</p>
                    <p>[Content:Left_Name_State]</p>
                </div>
                <div class="col-md-2 column">
                    <p><img src="[Content:Video_Thumbnail]" /></p>
                    <p><a href="[Content:Video_Url]">WATCH VIDEO</a></p>
                </div>
                <div class="col-md-5 column">
                    <p>[Content:Right_Testimonial]</p>
                    <p>[Content:Right_Name_State]</p>
                </div>
            </div>
        </repeat>
</div>
The result would look something like this: http://imgur.com/9eVmssh
Aug 12, 2014 at 2:58 PM
I think this should work without a problem, but I don't know OWL that well. You'll just have to try it - but get the OWL part to work without 2sxc first, so you don't confuse your problems and debug 2sxc when you should be working on OWL.
Aug 12, 2014 at 7:19 PM
Got Owl working 1st by putting the main owl carousel div after the h2...
<h2>CUSTOMER TESTIMONIALS</h2>
<div id="owl-testimonial" class="container owl-carousel owl-theme">
    <repeat>
        <div class="row item">
Then put the repeat just outside the row item div. Works great!

Thanks for the help!
Aug 12, 2014 at 7:53 PM
Edited Aug 12, 2014 at 7:54 PM
yeah should not be an issue good you have it working

It is set up here using razor template and some custom extra scripts for the custom arrow navigation

the top one is responsive and has different layouts with the nested elements there and only shows one

the other ones are just multiple items and item count set different for various device widths

http://www.plzsoccer.com/
Aug 12, 2014 at 8:40 PM
Thanks for sharing @nokiko... Those look great! I just started using 2sxc yesterday and haven't used razor with it yet... just tokens. What are the advantages of razor?
Aug 12, 2014 at 8:46 PM
lots more options since its pure c# programming

randomize functions to have random banners or random set of slides

count items to wrap for instance 4 col-sm-3 items in a row

use dnn functionality such as device capabillity to scale the images based on device

you name it.