Still having trouble with this. Does anyone have any idea about this?>

Hi Brian

You can do it with just one grid. I made a quick test on the Fanoe Starter kit that comes with Umbraco 7.2.

I created a Grid Layout datatype called "Grid Carousel". On the datatype editor:

• Create one full width Layout (12 columns) name it "Carousel".

• Create one Row Configuration, name it "Slide".

• Add three Cells to the Row Configuration.

  • First cell (12 columns), uncheck Allow all editors and select the Headline property editor.

  • Second cell (6 columns), uncheck Allow all editors and selct the Rich Text Editor.

  • Third cell (6 columns), uncheck Allow all editors and select the Embed property editor.

• Select the "Carousel" layout, highlight the section, uncheck the Allow all row configurations and select the "Slide" row.

• Save the datatype.

Now add the datatype to a document type. I used the Fanoe starter kit and on the "Home" document type I added a tab called "Carousel" and placed the "Grid Carousel" and named it "Carousel".

On the Home node in the content tree you now have the Carousel tab where you can create slides. This example works with two slides.

Create the two slides with header, text and embedded videos. On each row write "slide" in the Class setting and use the built in Set a background image setting to add a background image.

Save and publish the content.

Go to the Settings section of the backoffice, select the "Home" template and add this where you want the carousel to be rendered:

<div class="carousel">
    @CurrentPage.GetGridHtml("carousel")
</div>

Add this CSS to the page (I used the style.css that comes with the starter kit):

.carousel {
    width: 200%;
    transition: margin-left 2s ease-in-out;
}

.carousel.step {
    margin-left: -100%;
}

.slide {
    width: 50%;
    float: left;
}

.carousel h1 {
    font-size: 130px;
}

.carousel h1, .carousel p {
    color: white;
}

.carousel .video-wrapper {
    margin: 0 auto;
}

This is where the actual carousel functionality is created. By making the width of .carousel 200% and .slide 50% we get two elements that have the full width of the page within an element that has double width of the page.

Finally add this script to the page (I placed in the fanoe.js that comes with the starter kit):

var carousel = $('.carousel');

setInterval(
    function () {
      carousel.toggleClass('step');
    }
, 4000);

And now the page contains a working (albeit extremly low tech) carousel created with Grid Layouts.

Hope this can give you some inspiration.

/Rune

The above post already says it all, but maybe this blog also helps: http://24days.in/umbraco/2014/grid-macros/

Jeroen

Any chance to get this slider inside of a macro so the editor of the content can add a slider without adding

<divclass="carousel">
    @CurrentPage.GetGridHtml("carousel")
</div>

first?

I could add the <div class="carousel"> und every template and because it's empty, until the editor adds text/images, it doesn't take space on the website and the viewer won't recognize that there is a empty container. But isn't there a better way of doing that? Through a macro?

The macro example from the blogpost also uses a slider. Is that what you mean?

Jeroen

I worked through the blogspot and created that Slider. It works with the macro, and yes thats exactly what I wanted, but the Slider of Rune looks way better and because you edit the text/images in seperate cells/rows it's more mobile friendly.

Hi Chris

To create a macro for the carousel go to the Developer section of the backoffice and create a Partial View Macro File and call it "carousel". Use the Empty snippet and leave Create Macro checked.

In the editor enter the snippet from the template so it looks like this:

@inherits Umbraco.Web.Macros.PartialViewMacroPage

<div class="carousel">
    @CurrentPage.GetGridHtml("carousel")
</div>

Save the macro and now you can use the Insert Macro dialog on the template to add the carousel. It should add th efollowing to the template:

@Umbraco.RenderMacro("Carousel")

This works but isn't a very nice experience for the editor. What you can do to make things a bit more user friendly is create a checkbox where the editor can turn the carousel on and off in the content section. To do this head over to the Developer section, create a new Data Type call it "Carousel Switch". Pick True/False as the property editor.

Now go to the Settings section and add the Carousel Switch to the Document Type (following the previous example this is on the Home doc type). Name it "Enable carousel" and put it on the "Carousel" tab. Make sure it is above the Carousel property editor.

Go to the Developer section and edit the carousel partial view to check if the editor has enabled the carousel:

@inherits Umbraco.Web.Macros.PartialViewMacroPage

@if (CurrentPage.enableCarousel){
    <div class="carousel">
        @CurrentPage.GetGridHtml("carousel")
    </div>
}

If you go back to the Content section and look at the Carousel tab on the Home node there should be a checkbox. The carousel will now only be displayed if the editor use the checkbox.

This means you have to insert the macro on all templates where the carousel grid is used but is a much better solution for the editor IMO.

I'm glad you want to use the carousel I made but I just want to be clear; it was created rather quickly for test purposes. So it doesn't have any features for stopping and starting (when watching video etc.) and also ONLY works with two slides. It WILL break if more slides are created.

Hope this answers your question.

/Rune

Hi Rune,

Thank you for all your help. I feel dumb because I followed step by step and still can't get it to work.  

This is my template setting, is this correct?

@inherits Umbraco.Web.Mvc.UmbracoTemplatePage

@{

    Layout = "Master.cshtml";

}

<div class="carousel">

    @CurrentPage.GetGridHtml("carousel")

</div>

@CurrentPage.GetGridHtml("content", "fanoe")  

Hi Brian

If you haven't set up the macro described in my last post then this is correct. It seems Chris got it working so you might have missed something in the setup.

Is the grid not displaying or the carousel not working?

Do you get any error messages?

Have you added the the data type to the home document type with an alias of "carousel"?

/Rune

I didn't have the alias correctly, so that was one issue. But I'm not getting any errors or anything. 

Hi Brian

Do you the Grid editor on the Home node in the content section?

/rune

I do not, I have it in it's own little "carousel" tab. 

The Home page does have another grid in the content setting. Not the carousel grid though.  

Yup, that's right. I meant if you could see the Grid Editor(where you enter content in the backoffice) :-)

Have you tried inspecting the html on the page to see if anything has been entered?

I decided to click on your name and look you up and now I feel like I'm talking to a celebrity. 

But yeah, the div with the carousel is in the right position, all is well there. There just isn't anything inside of it.  

What about the fanoe.js. Where did you put the function? Was it anywhere in particular?

Lol, nah, just a duder with a great job ;)

Just above the end of the self invoking function })(jQuery); but if your content is not rendering it's not because of the js.

Anyway it should look like this:

   var carousel = $('.carousel');

    setInterval(
      function () {
        carousel.toggleClass('step');
      } 
    , 4000);
  })(jQuery);

/rune

Hm... Still a celebrity. 

When I look closely at it in Firebug, you must be right. The odd little marker pointing to where the div is on the webpage moves left and right every few seconds, exactly as the carousel should move. It's just not loading my stuff. Where should I look to see what I did wrong? 

Only thing I can think of is double (or tripple) check the alias on the home document type and the name you used in the template. If they are not the same it will not show and now errors will be shown.

Check if the content you entered in the grid is not just saved but also published. Try to unpublish and publish.

The other Grids in the starter kit are working right?

If this doesn't help I'm a little lost, can you paste the raw HTML from the rendered page?

is working on a reply...