Hi there,
Using the template JA Fit joomla 4 at the url theomeijer.nl
at the home page using the jacm module feautures intro style 3
see the names groepsles budo arrangement and fysio&beauty
On the mobile frame you can wipe with your fingers to the next one but my customer wants also a navigation in the pics so
the visitors know there are more options. Example with a white arrow or a text link to the next one
How can we fix this ?
regards Rob pagefactory
Hi pagefactory,
To show the navigation on the mobile, you can open the /templates/ja_fit/acm/features-intro/tmpl/style-3.php file, line 81:
Replace with the following code:
<script>
(function($){
jQuery(document).ready(function($) {
$("#acm-feature-<?php echo $module->id; ?> .owl-carousel").owlCarousel({
addClassActive: true,
items: <?php echo $column; ?>,
margin: 0,
responsive : {
0 : {
items: 1,
},
768 : {
items: 2,
},
979 : {
items: 2,
},
1199 : {
items: <?php echo $column; ?>,
}
},
loop: true,
nav : true,
dots: <?php echo($column >= $count) ? 'false' : 'true' ;?>,
navText: ["<span class='icon-chevron-left'></span>", "<span class='icon-chevron-right'></span>"],
autoplay: false
});
});
})(jQuery);
</script>And create the /templates/ja_fit/css/custom.css file and add the following CSS code to this file:
.owl-nav {
display: none;
}
@media (max-width: 480px) {
.owl-nav {
display: block;
}
.owl-nav .owl-prev,
.owl-nav .owl-next {
position: absolute;
z-index: 2;
color: #fff;
top: 50%;
background: #000;
width: 34px;
height: 34px;
line-height: 34px;
text-align: center;
transform: translateY(-50%);
left: 10px;
}
.owl-nav .owl-next {
left: auto;
right: 10px;
}
}Hope this helps!
Hi Dominic,
works perfect !! also in the code of team, style-1.php
thx.
friendly regards
Rob - pagefactory -