OK. I manged to change it back to the old (somewhat) slider style. It's a dirty fix, but in case someone else may want to do this, here's what I did.
Create Override Files
- Create the folders to make the following path: [WEB_ROOT]/templates/[MY_TEMPLATE_NAME]/html/layout/com_fabrik/element
- Copy the file fabrik-element-fileupload-slick-carousel.php from [WEB_ROOT]/plugins/fabrik_element/fileupload/layouts to the newly created element folder (above).
Editing File
Open file in text editor and then make the following changes:
1: Add the arrows by enabling it in the
data-slick settings by changing from
false to
true
PHP:
<div id="<?php echo $d->id;?>"
style="width:<?php echo $d->width;?>px"
class="slickCarousel"
data-slick='{"slidesToShow": 1, "slidesToScroll": 1, "arrows": true, "fade": true, "asNavFor": "#<?php echo $d->id . '_nav'; ?>"}'
>
<?php foreach ($d->imgs as $img) : ?>
<div style="opacity: 0" class="slickCarouselImage"><h3><?php echo $img ?></h3></div>
<?php endforeach; ?>
</div>
2: Next, we going to set the
data-slick settings to show only 1 slide at a time and also to remove the dots by setting it to
false.
3: Next, we're going to remove the thumbnail gallery from displaying/rendering by commenting out the html and the php codes.
PHP:
<div id="<?php echo $d->id . '_nav';?>"
style="width:<?php echo $d->width;?>px"
class="slickCarousel"
data-slick='{"slidesToShow": 1, "slidesToScroll": 1, "dots": false, "centerMode": true, "focusOnSelect": true, "asNavFor": "#<?php echo $d->id; ?>"}'
>
<?php //foreach ($d->thumbs as $img) : ?>
<!--<div><h3><?php //echo $img ?></h3></div>-->
<?php //endforeach; ?>
</div>
4: This one may not be necessary, but I also disabled the dots by setting it to
false.
PHP:
<?php else : ?>
<div style="height: <?php echo $d->height; ?>px; width: <?php echo $d->width; ?>px" id="<?php echo $d->id;?>"
class="slickCarousel"
data-slick='{"slidesToShow": 1, "slidesToScroll": 1, "dots": false, "centerMode": true, "adaptiveHeight":true}'
>
<?php foreach ($d->thumbs as $img) : ?>
<div style="opacity: 0" class="slickCarouselImage"><h3><?php echo $img ?></h3></div>
<?php endforeach; ?>
</div>
<?php endif; ?>
Note: Essentially, we added the arrows in the settings, set the navigation to show 1 slide at a time and remove the dots and remove the thumbnail gallery.[/I]
CSS Fixes
Now, lets fix the arrows so that they show properly on over the images by adding the following to your CSS file:
CSS:
/** Slider Fix **/
.slick-prev, .slick-next {z-index:9999;}
.slick-prev {left:25px !important;}
.slick-next {right:25px !important;}
There may be other CSS changes needed.
