Hi Geofrey,

Your best bet is making use of Nested Content which allows the use of repeatable elements. As of Umbraco 7.7, Nested Content is shipped with Umbraco, if you're using an old version, you'll need to install it.

I'm not sure about your ability level, so shout up if you need more help but here's an overview of the steps I'd take to set up a slider:

1. Login to Umbraco
2. Go to Settings
3. Create a new folder in the Document Types section called Nested Content (this is optional but it's a nice way to keep things organised).
4. Create a new document type in that folder called Slide. This acts like a normal document type, just add the fields that you need. In my example, I'm adding an Image field, and a Text field. The first allows you to choose an image, the second is a rich text editor.
5. When you've added your fields, head over to the Developer section. Now add a new Data Type called Slides. Use Nested Content as the Property editor type.
6. In the Doc Types section, choose your newly created Slide as the document type. You'll need to choose the tab you created as well.

Now you can use this new data type in any of your other document types. To actually display the slider elements, check out the Nested Content Documentation, especially the Rendering Nested Content part.

As I said, that's a bit of an overview of the steps, you'd need to create your desired markup in the template but this would be totally dependent on which slider you use. If you need more help either shout up, or I'll try to cobble together a more in depth tutorial for you.

Good luck!

Hii Ben,

I managed to create a simple slider using slick slider but it just displays a list of images, not a slider, here is what I have done:

1. I linked all slick sliders files in my master

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.js"></script>

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.js"/>

1. added javascript for calling the slider at the end of my page.

   <script>
            $(document).ready(function(){
               $('.slides').slick({
                   autoplay:true,
                   pauseOnHover:true
               });
            });
         </script>

2. I created a macro from partial view macros files by selected a snippet called gallery and edited it little bit m here is how it look:

@inherits Umbraco.Web.Macros.PartialViewMacroPage @* Macro to display a gallery of images from media the media section. Works with either a 'Single Media Picker' or a 'Multiple Media Picker' macro parameter (see below).

How it works:
    - Confirm the macro parameter has been passed in with a value
    - Loop through all the media Id's passed in (might be a single item, might be many)
    - Display any individual images, as well as any folders of images

Macro Parameters To Create, for this macro to work:
Alias:mediaIds     Name:Select folders and/or images    Type: Multiple Media Picker
                                                        Type: (note: you can use a Single Media Picker if that's more appropriate to your needs)

*@

@{ var mediaIds = Model.MacroParameters["mediaIds"]; } @if (mediaIds != null) {

@foreach (var mediaId in mediaIds.ToString().Split(',')) { var media = Umbraco.Media(mediaId);

        @* a single image *@
        if (media.DocumentTypeAlias == "Image")
        {
            @Render(media);
        }

        @* a folder with images under it *@
        if (media.Children("Image").Any())
        {
            foreach (var image in media.Children("Image"))
            {
                @Render(image);
            }
        }

    }
</div>

}

@helper Render(dynamic item) {

}

1. In macro, I added those parameters Alias: mediaIds Name: Select files and /or Images, type: Multi-Media Picker

2. I rendered my partial view macro on my home page as follows: @Umbraco.RenderMacro("Gallery", new {mediaIds="1120,1118,1119"})

Now when I previe my home page i get list of Images instaed of a slider as I want , can you help to figure out why it returns list of images istead of slider?

Hi Geofrey,

This is for FlexSlider (http://flexslider.woothemes.com/), using nested content as Ben described.

The basic unit is a docType called "Slide" which has a TextOverlay textarea and a SliderImages media picker. This is then added as a Nested Content item to another docType (called "Slider") which can be added using the "Compositions" dialogue to any other docType that needs a carousel.

The code below is the flexSlider.cshtml partial for the Carousel.

@img.GetCropUrl("Slider") refers to a crop set up in the ImageCropper dataType. If you're not using it then you can just do @img.Url.

@inherits Umbraco.Web.Mvc.UmbracoViewPage<IPublishedContent>
        @{

        if(Model.HasValue("sliderImages")) {

        var slides = Model.GetPropertyValue<IEnumerable<IPublishedContent>>("sliderImages");
        <div class="col-xxs-12 flexslider">
            <ul class="slides">
            @{  
                foreach(IPublishedContent sliderItem in slides) {
                    var img = sliderItem.GetPropertyValue<Image>("slideImage");
                    if (img != null) {
                        var alt = sliderItem.GetPropertyValue("TextOverlay").ToString() != "" ? sliderItem.GetPropertyValue("TextOverlay") : img.Name;
                    <li>
                        <img src="@img.GetCropUrl("Slider")" 
                        alt="@alt">
                        <div class="sliderCaption">@sliderItem.GetPropertyValue("TextOverlay")</div>
                    </li>
                    }
                }
            }
            </ul>
        </div>
        }

In a JQuery pad you can get it going with:-

// Slider
if($('.flexslider').length > 0) {       
            $('.flexslider').flexslider({
              animation: 'slide',
              animationSpeed: '4000',
              slidshowSpeed: 6000,
              slideshow: true,
              useCss: false,
              easing: 'jswing',
                    after: function(slider){ 
                                    slider.pause(); 
                                    slider.play(); 
                            }
            });
    }

There's a load of stuff you can add to pretty it up in CSS.

Hope this helps ;)

I'm trying to upload the kit in admin panel->package section. already i have "The Starter Kit", which default from Umbraco version. i'm trying to install codeshare kit also, its throw an error, whether i have to uninstall the default package and install this package alone? or ?

Thanks

Hi Paul,

Thanks and got the solution, i just removed the default starter kit and installed the codeshare kit, its working fine for me thanks.

is working on a reply...