Content Slider Example - lokothodida/DM_Matrix GitHub Wiki
This is a brief walk-through on how to set up a simple content slider (this can be configured to make it an image gallery, a news carousel etc...).
Build a table with the following properties
- Name: slider
-
Fields:
- Name: title, Type: textlong
- Name: image, Type: imagepicker
- Name: tags, Type: tags
- Name: content, Type: wysiwyg
- Max Records: 0
This assumes that you have some sort of Javascript loaded to do the sliding for you. This example uses TinyCarousel.
<?php
// initialize slides
$slides = $var->query("SELECT * FROM slider ORDER BY id DESC");
$slides = $var->formatQuery($slides, 'slider');
?>
<script src="path/to/jquery.tinycarousel.js"></script>
<script>
$(document).ready(function(){
$('#slider').tinycarousel();
});
</script>
<style>
#slider {}
#slider .viewport {}
#slider .buttons {}
#slider .next {}
#slider .disable {}
#slider .overview {}
#slider .overview li {}
</style>
<div id="slider">
<a class="buttons prev" href="#">left</a>
<div class="viewport">
<ul class="overview">
<?php foreach ($slider as $slide) { ?>
<li>
<img src="<?php echo $slide['image']; ?>" />
<div class="text">
<h3 class="title"><?php echo $slide['title']; ?></h3>
<span class="tags"><?php echo $slide['tags']; ?></span>
<span class="content"><?php echo $slide['content']; ?></span>
</div>
</li>
<?php } ?>
</ul>
</div>
<a class="buttons next" href="#">right</a>
</div>