Copied to clipboard

Flag this post as spam?

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


  • Geofrey 40 posts 161 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 180 posts 866 karma points c-trib
    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!

  • Pierre Breau 11 posts 121 karma points
    May 04, 2019 @ 23:18
    Pierre Breau
    0

    I was able to create nested content using your tutorial and add the content to them, and I look through both links you provided, I just cannot wrapped my head around adding the carousel to a partial view.

    Do you have a full tutorial somewhere or an example of adding nested content to the page ?

    I am using Umbraco 8

    thanks for any help :)

  • Paul Seal 524 posts 2889 karma points MVP 7x c-trib
    May 05, 2019 @ 06:23
    Paul Seal
    0

    Hi Pierre There is an example in my v8 starter kit. Here is the code for the partial view on GitHub. https://github.com/prjseal/CodeShare-Umbraco-Starter-Kit-for-v8/blob/master/src/CSUSK.Web/Views/Partials/Content/_MainCarousel.cshtml

    Paul

  • a 8 posts 88 karma points
    Feb 05, 2020 @ 15:59
    a
    0

    Hi Paul. What is in Doctument Type and Compositions please. Where do I store the images.

    Thanks. this is not so easy when this is your first intro to Umbraco.

    Just need a helping hand.

  • Geofrey 40 posts 161 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/[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) {

    @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 1136 posts 2523 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 524 posts 2889 karma points MVP 7x c-trib
    Dec 07, 2017 @ 12:31
    Paul Seal
    103

    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 40 posts 161 karma points
    Jan 30, 2018 @ 15:37
    Geofrey
    0

    Thank you bro , keep it up :)

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

  • Geofrey 40 posts 161 karma points
    Feb 21, 2018 @ 22:15
    Geofrey
    0

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

  • vennilasep22 21 posts 123 karma points
    Dec 11, 2019 @ 09:26
    vennilasep22
    0

    Hi Paul,

    I'm trying to install the starter kit package in my application, its throw an error and collapse the code, i'm using umbraco 8.3.0 and the framework. 4.7.2 MS studio 2017, please help to solve this issue.

    Thanks Vennila M

  • Paul Seal 524 posts 2889 karma points MVP 7x c-trib
    Dec 11, 2019 @ 13:05
    Paul Seal
    0

    I I'm just testing this out myself now.

  • Rolando Cedron 1 post 71 karma points
    Apr 14, 2020 @ 10:27
    Rolando Cedron
    0

    How can I setup the Database for this starter kit? When I run the code I doesn't point me to the DB setup for connection string. Hope you can help me on this because I want to know how the carousel propetry control setup in Setting -> Document Types.

  • vennilasep22 21 posts 123 karma points
    Dec 12, 2019 @ 02:08
    vennilasep22
    0

    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

  • vennilasep22 21 posts 123 karma points
    Dec 12, 2019 @ 02:12
    vennilasep22
    0

    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.

Please Sign in or register to post replies

Write your reply to:

Draft