Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Geofrey 14 posts 104 karma points
    16 days ago
    Geofrey
    0

    Creating Carousel Slider in Umbraco

    Hii.

    I am a newbie in Umbraco, can someone provide tutorial or guidance on how to create carousel slider in Umbraco? google didn't help, please help

  • Ben Palmer 113 posts 574 karma points
    15 days ago
    Ben Palmer
    1

    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!

  • Geofrey 14 posts 104 karma points
    15 days ago
    Geofrey
    0

    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/slick-carousel@1.8.1/slick/slick.min.js"></script>
      <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.js"></script>

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

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

    3. 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) {

    @item.Name
    }

    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?

  • Craig100 854 posts 1759 karma points c-trib
    15 days ago
    Craig100
    0

    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 ;)

  • Paul Seal from codeshare.co.uk 246 posts 1126 karma points c-trib
    4 days ago
    Paul Seal from codeshare.co.uk
    0

    Hi Geoffrey I've made a carousel using Nested Content. It is in my new Umbraco Starter Kit package which I released today.

    Here is the link to the Umbraco Package https://our.umbraco.org/projects/starter-kits/codeshare-starter-kit/

    Here is the link to the Demo site http://codesharestarterkit.azurewebsites.net/

    Here is the link to the project in GitHub https://github.com/prjseal/CodeShareUmbracoStarterKit

    Cheers

    Paul

Please Sign in or register to post replies

Write your reply to:

Draft