Html in caraousel

I’m new to Javascript and using the slider control. I try to slide html as Caraousel but the page cannot move back not like when I slide image in Caraousel, Would someone mind explaining how I would go about using a html in Caraousel please.

Many Thanks,
Apriyanto

sory I mean Caraousel not the slider control

thanks

Hi,

are you using Touch carousel ? There is a special forum for this library.

We need the sample that allows to reproduce the issue locally.

Hi, I am also trying to use carousel, in html but couldnt get it.
My scenario is, I have a html template where royalslider plugin is embedded for image slideshow. Basically i want to slide the image on touch as carousel does. Any idea?

Hi,

You may try carousel view from dhtmlxTouch library:

dhtmlx.com/touch/

Hi Alexandra,
I tried using carousel but i am not getting how to implement it with my html template.
Can you please help me out? I have attached my code as well below:
{
id: “bookInfo”,
rows: [
{
id: “listBack”,
view: “activeTemplate”,
scroll: true,
// dhx.ui.imagebutton
activeContent: {
//mybutton:{
myback: {
// id: “runbutton”,
view: “imagebutton”,
width: “auto”,
css: “appServiceList”,
// label: “<-”,
src: “img/list-icon.png”,
click: back_logic,
},
whatsincluded: {
id: “detailbutton”,
view: “button”,
width: “auto”,
css: “btn”,
label: “WHATS INCLUDED?”,
//value: “1”,
// label: “<-”,
// src: “img/list-icon.png”,
click: showdetails,
}

                            },
                            template: function(obj, common) {

                                var html = '<div class="appWrapperP">';
                                html += '<section class="appRow">';
                                html += '<div class="appContainer" id="appContent">';
                                html += ' <div class="appSocialInt">';
                                html += '<a href="#" class="appShareIcon"><img src="img/share-icon.png"></a>';
                                html += '<div class="appSocialLinks">';
                                html += '<ul>';
                                html += '<li class="fb"><a href="#"></a></li>';
                                html += '<li class="tw"><a href="#"></a></li>';
                                html += '<li class="em"><a href="#"></a></li>';
                                html += '</ul>';
                                html += '</div>';
                                html += '</div>';
                                html += common.myback(obj, common);
                                html += ' </div>';

                                html += '<div class="appRow" id="appSlideshow">';
                                html += '  <div class="appSlideAction">';
                                html += ' <div class="sliderContainer fullWidth clearfix">';
                                html += '   <div id="full-width-slider" class="royalSlider heroSlider rsMinW">';
                                html += '   <div class="rsContent">';
                                html += '  <img class="rsImg" src="assets/img/full-width/1.jpg" alt="" />';
                                html += '  </div>';
                                html += '   <div class="rsContent">';
                                html += '  <img class="rsImg" src="assets/img/full-width/2.jpg" alt="" />';
                                html += '  </div>';
                                html += '   <div class="rsContent">';
                                html += '  <img class="rsImg" src="assets/img/full-width/3.jpg" alt="" />';
                                html += '  </div>';
                                html += '  </div>';
                                html += '  </div>';
                                html += '    <div class="appContainer">';
                                html += '<ul>';

// html += ‘

"’+obj.plan_title+’"

’;
html += ’
  • $’ + obj.plan_price + ‘
  • ’;
    html += ’
  • Buy
  • ’;
    html += ’ ';
    html += common.whatsincluded(obj, common);
    //html += ‘Whats Included?’;
    html += ‘’;
    html += ‘’;
    html += ‘’;
    html += ‘’;
                                    html += ' <div class="push"></div>';
                                    html += '</div>';
                                    html += '<footer class="footer">';
                                    html += '<section class="appRow">';
                                    html += ' <div class="appLogoBar">';
                                    html += '  <div class="appContainer">';
                                    html += '   <div class="logoBox">';
                                    html += '<h1>' + obj.plan_title + '</h1>';
                                    // html += '     <h1>Noosa Stone Water Wall</h1>';
                                    html += '</div>';
                                    html += '</div>';
                                    html += '</div>';
                                    html += '  <div class="appSlideBar">';
                                    html += '      <div class="appContainer">';
                                    html += '   <figure>';
                                    html += ' <img src="img/diy-book.png">';
                                    html += '   </figure>';
                                    html += '  <div class="appSliderText">';
                                    html += '    <p>Download the water feature of your choice, lorem ipsum animated text that slides rtl.</p>';
                                    html += '   <ul class="appSliderPager hr">';
                                    html += '     <li><span></span></li>';
                                    html += '    <li><a href="#"></a></li>';
                                    html += '    <li><a href="#"></a></li>';
                                    html += '    <li><a href="#"></a></li>';
                                    html += '     </ul>';
                                    html += '</div>';
                                    html += '</div>';
                                    html += '</div>';
                                    html += '   </section>';
                                    html += '  </footer>';
                                    return html;
                                },
                            },
                        ]
    
                    },
    

    So what i want is :
    insided this structure i want carousel
    html += ’

    ';
    html += ’ ';
    html += ’
    ';
    How can i embed? Please help me. Thanks in advance.

    Note: I have already loaded json data for image source.

    Please see ready samples with carousel and multiview:

    dhtmlxTouch_v12_120913/samples/01_views/09_multiview.html
    dhtmlxTouch_v12_120913/samples/01_views/13_carousel.html

    Carousel shows views on swipe event. However, you can also use buttons for navigation and call show() method for the view that you want to show:

    $$(“im1”).show();