You should apply (if needed, customize for yourself) the html <div> structure, and use the js, and css from the examples (links) below:
https://jsfiddle.net/solodev/huten0wq/?utm_source=website&utm_medium=embed&utm_campaign=huten0wq
actually this is a better, I think last updated, source of this carousel:
https://github.com/solodev/infinite-carousel (it is better to copy the source codes from this github link).
1. For using the css, and js from the above link, you should just rename the <section class="ft-wrp clearfix"> to <section class="customer-logos"> and <div class="spons-well"> to <div class="slide"> in your K2 layout in order to make it ready to work with the given css and javascript(jQuery), for example. Also you should wrap this carousel into
<div class="row">
<div class="container">
So it is not a huge job to use these on your layout. Maybe a little fine tuning needed, checking, modifying or deleting redundant divs in your current html structure, you have to work on that a bit...
2. The css from the link should be copied in your theme css, or custom.css file of your template and the jQuery(js) code should be copied within <script></script> tags at the bottom of your layout php file which you copied here, after the last closing html </div> tag (you could load these from external js file but now it is enough if you just include that in your layout)(the css could also be loaded from separate .css file but you can do that later. However, as later got clear, it is very important, that the carousel.css style has to loaded before the jQuery script starts to run on your site! Otherwise the carousel will look messed up a lot).
3. You have to make sure you load the 2 javascript/jQuery library in your HTML head or before your closing html body tag (if it's not there on your site yet):
jQuery min and slick js
you can just simply copy and paste it in the <head></head> of your page from here:
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
Or in a more Joomla standard way, you paste this code below to the top of your K2 layout file to load the required js libraries like the following (after the line: defined('_JEXEC') or die;) :
$document = JFactory::getDocument();
$document->addScript('https://code.jquery.com/jquery-2.2.4.min.js'); // comment out this line if it's already loaded on your site.
$document->addScript('https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.js');
(As I see, Bootstrap is already loaded on your site so it's better if you do not load that again. If the jQuery library also loaded already, then you should just // comment out the jQuery library loading from the above code).
And it's actually done.
And just for fun I now tested the above with dummy content (from arrays with few of your logos) in your given PHP/HTML layout code (modified a bit), then I can confirm that it works. Here is the result, recorded in gif on my test page:
Additional things:
The only reason I do not paste here your layout code edited, fully working with the above carousel, because I would like to let you to do that, understanding and following the above steps. That is the only way you will learn to use additional javascripts and css and it’s important for you to improve your skills with that.
more info about using the above is here:
https://www.solodev.com/blog/web-design/adding-an-infinite-client-logo-carousel-to-your-website.stml
The above carousel is working fine but if you need more exapmle, another code which you can check out and 'borrow':
https://codepen.io/mdashikar/pen/VWPvgE
and it's made already even with Bootstrap 4 :
https://bootsnipp.com/snippets/featured/client-or-partners-logo-slider (however I do not see any bootstrap in this (except the ‘container’) but it does not matter, this is just another version of the above, almost the same all of them).
There are a lot of versions of these ready to use carousels of this kind on the net. I hope the above can help you.
As you started to work on this and you now got stuck with the html divs, I copy here your edited K2 layout file and you can try this or use this in your layout. I of course did not tried this particular file since I do not have the required and called variables in it, but this is how your layout should look like. Check how the divs are restructured in the - sponsors carousel section - of the layout.
<?php
/**
* @version $Id: default.php 1766 2012-11-22 14:10:24Z lefteris.kavadas $
* @package K2
* @author JoomlaWorks http://www.joomlaworks.net
* @copyright Copyright (c) 2006 - 2012 JoomlaWorks Ltd. All rights reserved.
* @license GNU/GPL license: http://www.gnu.org/copyleft/gpl.html
*/
// no direct access
defined('_JEXEC') or die;
$document = JFactory::getDocument();
// $document->addScript('https://code.jquery.com/jquery-2.2.4.min.js'); // jQuery already loaded on the page
$document->addScript('https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.js');
?>
<?php if ($params->get('feed')): ?>
<div class="k2FeedIcon">
<a href="<?php echo JRoute::_('index.php?option=com_k2&view=itemlist&format=feed&moduleID=' . $module->id); ?>" title="<?php echo JText::_('K2_SUBSCRIBE_TO_THIS_RSS_FEED'); ?>" target="_blank">
<span><?php echo JText::_('K2_SUBSCRIBE_TO_THIS_RSS_FEED'); ?></span>
</a>
</div>
<?php endif; ?>
<div id="k2ModuleBox<?php echo $module->id; ?>" >
<?php if ($params->get('itemPreText')): ?>
<p class="modulePretext"><?php echo $params->get('itemPreText'); ?></p>
<?php endif; ?>
<?php if (count($items)): ?>
<?php foreach ($items as $key => $item): ?>
<article class="clearfix">
<header>
<?php if ($params->get('itemTitle')): ?>
<h2 class="title"><a href="<?php echo $item->link; ?>"><?php echo $item->title; ?></a></h2>
<?php endif; ?>
</header>
<section class="content">
<?php if ($params->get('itemImage') || $params->get('itemIntroText')): ?>
<?php if ($params->get('itemImage') && isset($item->image)): ?>
<div class="img">
<a href="<?php echo $item->link; ?>" title="<?php echo JText::_('K2_CONTINUE_READING'); ?> "<?php echo K2HelperUtilities::cleanHtml($item->title); ?>"">
<img src="<?php echo $item->image; ?>" alt="<?php echo K2HelperUtilities::cleanHtml($item->title); ?>"/>
</a>
</div>
<?php endif; ?>
<?php if ($params->get('itemIntroText')): ?>
<p>
<?php echo $item->introtext; ?>
</p>
<?php endif; ?>
<?php endif; ?>
</section>
<?php
// here your sponsors carousel section starts -->
?>
<?php if ($params->get('itemExtraFields') && count($item->extra_fields)): ?>
<?php $sponsors = array(); ?>
<?php foreach ($item->extra_fields as $key => $fieldname): // regroup fields per level?>
<?php if($fieldname->name === 'Url'):
$sponsors[$fieldname->alias][$fieldname->name] = $fieldname->url;
else:
$sponsors[$fieldname->alias][$fieldname->name] = $fieldname->value;
endif; ?>
<?php endforeach; ?>
<?php
// define sort order for $sponsors array
$sort_order = array('Location','Collaborating Partner','Platinum', 'Gold', 'Silver', 'Bronze','Carbon Neutrality', 'Booth', 'Cocktail', 'Badge', 'Event Partner', 'Media', 'Global', 'USA', 'Europe', 'Asia');
// sort $sponsors based on sort order in $sort_order
usort($sponsors, function ($a, $b) use ($sort_order) {
return array_search($a['Level'], $sort_order) - array_search($b['Level'], $sort_order);
});
?>
<div class="row">
<div class="container">
<section class="customer-logos">
<h4 class="rotate col-md-2">Sponsors</h4>
<?php foreach ($sponsors as $key=>$value) : ?>
<div class="slide">
<h4><small> <?php echo $value['Level'] ?> </small></h4>
<a href="<?php echo $value['Url'];?>" target="_blank"><?php echo $value['Logo'] ?></a>
</div>
<?php endforeach; ?>
</section>
</div>
</div>
<?php endif; ?>
</article>
<?php endforeach; ?>
<?php endif; ?>
</div>
<script type="text/javascript">
$ = jQuery.noConflict();
$(window).load(function () {
$('.customer-logos').slick({
slidesToShow: 6,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 1000,
arrows: false,
dots: false,
pauseOnHover: false,
responsive: [{
breakpoint: 768,
settings: {
slidesToShow: 4
}
}, {
breakpoint: 520,
settings: {
slidesToShow: 3
}
}]
});
});
</script>
IMPORTANT UPDATE ABOUT USING THE CAROUSEL CSS STYLE
If you use javascript/jQuery all kinds of stupidity can happen on your site when you run these scripts (more if someone just starts with javascript), so here in this particular case happened that the slides stack up at the start of the carousel, however at the end of the carousel the slides were OK. It can cause a lot of headache to figure out why it happens, when everything looks correct.
Now in this case, if the jQuery script starts to run before the css is loaded then the first slides (or clones of slides) created by the script will be in different sizes (heights) than the later slides, due to the script trying to fill up white spaces in the slider. Thus the slides will stack up. The carousel will look a very ugly thing. And on the top of that you will feel really stupid. :) It happens when you copy the slider (carousel) css in one of your custom.css file which loads at the end of everything on your site.
So we have to load the carousel.css before the slider script (or carousel script, you name it). There are two easy way to do this.
1. Copy the whole carousel css on the top of your layout file between <style></style> tag. This is not the most optimal solution but it works very well. This is also the surest way to check if css cause problem.
2 Create a carousel.css file, put it in your yourjoomla/templates/yourtemplate/css folder and load that file from the top of your layout file (in this case in K2 layout file), with the same method as you loaded the slick.js file at the beginning of your file.
$document->addStyleSheet('/templates/yourtemplate/css/carousel.css');
If the css file is not loaded then try:
$url = JPATH_ROOT . '/templates/yourtemplate/css/carousel.css'; // try it with or without opening slash (directory separator at the beginning of the path.
$document->addStyleSheet($url);
So, this should handle the stupidity actually if the slides are stacking up.
Just to make sure I updated the jQuery script with adding a $(window).load() function to the beginning of the script to hold back jquery to fire before page is fully loaded.
And finally in this individual case the source of the slider appearance problem was a css rule which had to be added to the css of the slider and set to:
.slick-track {
display: inline-flex;
margin-top: 15px;
margin-bottom: 15px;
}
This problem is not the same as feeding the slider with wrongly formulated, structured data, which was not a problem in this case at all.
