Copied to clipboard

Flag this post as spam?

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


  • Geofrey 37 posts 148 karma points
    Nov 25, 2017 @ 23:21
    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 115 posts 577 karma points
    Nov 26, 2017 @ 09:35
    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 37 posts 148 karma points
    Nov 26, 2017 @ 11:46
    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 879 posts 1826 karma points c-trib
    Nov 26, 2017 @ 19:26
    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 255 posts 1232 karma points c-trib
    Dec 07, 2017 @ 12:31
    Paul Seal from codeshare.co.uk
    100

    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

  • Geofrey 37 posts 148 karma points
    23 days ago
    Geofrey
    0

    Thank you bro , keep it up :)

    May be you know how to add image caption via media picker in umbraco.?

  • Geofrey 37 posts 148 karma points
    1 day ago
    Geofrey
    0

    Please, can you make your starter kit multi-language platform?

Please Sign in or register to post replies

Write your reply to:

Draft