Dots not working on carousel

Home Forums Porto – Responsive HTML5 Template Dots not working on carousel

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #10045002
    Marvinbb
    Participant

    How to add carousel to template from the elements page? I added the html to template but dots not working. On the carousel in the elements page says, Check the examples file examples.carousels.js for more information but it doesn’t make any sense to me. I am completely lost. Please explain step by step. Thank you!


    #10045005
    Support
    Keymaster

    Hello, thanks for your purchase.

    This is a simple example of carousel with “dots”:

    <div class="owl-carousel owl-theme" data-plugin-options="{'items': 6, 'margin': 10, 'loop': false, 'nav': true, 'dots': true, 'stagePadding': 40}">
    	<div>
    		<img alt="" class="img-fluid rounded" src="img/projects/project-5.jpg">
    	</div>
    	<div>
    		<img alt="" class="img-fluid rounded" src="img/projects/project-6.jpg">
    	</div>
    	<div>
    		<img alt="" class="img-fluid rounded" src="img/projects/project-7.jpg">
    	</div>
    	<div>
    		<img alt="" class="img-fluid rounded" src="img/projects/project-1.jpg">
    	</div>
    	<div>
    		<img alt="" class="img-fluid rounded" src="img/projects/project-2.jpg">
    	</div>
    </div>

    For the basic modes the JS file is not necessary.

    Please send me the URL of your site so I can check what is going on.

    Thanks!


    #10045008
    Marvinbb
    Participant
    This reply has been marked as private.
    #10045009
    Support
    Keymaster

    Hi, I see that you copied the HTMl from the browser (after rendered), you need to copy the HTML of the carousel from the HTML file itself.

    You can use this one:

    <div class="owl-carousel owl-theme" data-plugin-options="{'items': 6, 'margin': 10, 'loop': false, 'nav': false, 'dots': true}">
    	<div>
    		<img alt="" class="img-fluid rounded" src="img/projects/project-5.jpg">
    	</div>
    	<div>
    		<img alt="" class="img-fluid rounded" src="img/projects/project-6.jpg">
    	</div>
    	<div>
    		<img alt="" class="img-fluid rounded" src="img/projects/project-7.jpg">
    	</div>
    	<div>
    		<img alt="" class="img-fluid rounded" src="img/projects/project-1.jpg">
    	</div>
    	<div>
    		<img alt="" class="img-fluid rounded" src="img/projects/project-2.jpg">
    	</div>
    	<div>
    		<img alt="" class="img-fluid rounded" src="img/projects/project-5.jpg">
    	</div>
    	<div>
    		<img alt="" class="img-fluid rounded" src="img/projects/project-6.jpg">
    	</div>
    	<div>
    		<img alt="" class="img-fluid rounded" src="img/projects/project-7.jpg">
    	</div>
    	<div>
    		<img alt="" class="img-fluid rounded" src="img/projects/project-1.jpg">
    	</div>
    	<div>
    		<img alt="" class="img-fluid rounded" src="img/projects/project-2.jpg">
    	</div>
    </div>

    Try that and let me know if you need any help.

    Kind Regards.


Viewing 4 posts - 1 through 4 (of 4 total)