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 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 += ‘
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 += ’
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();