I just purchased Master Slider - and I'm trying to place text UNDERNEATH the images of each slide - however the paragraphs keep appearing above the image.
Any ideas?
I've tried floating, clearing, and inspecting all the elements + randomly deactivating them all to try figure out why this order is being reversed.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Master Slider Filters Template</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<!-- Base MasterSlider style sheet -->
<link rel="stylesheet" href="http://ift.tt/1S4rlsH" />
<!-- Master Slider Skin -->
<link href="http://ift.tt/1VBHXxn" rel='stylesheet' type='text/css'>
<!-- jQuery -->
<script src="http://ift.tt/1S4rlsJ"></script>
<script src="http://ift.tt/1VBHXxr"></script>
<!-- Master Slider -->
<script src="http://ift.tt/1S4rlsL"></script>
<style>
<style> .words {
text-align: center;
}
</style>
</head>
<body>
<!-- template -->
<div class="ms-filters-template">
<!-- masterslider -->
<div class="master-slider ms-skin-default" id="masterslider">
<div class="ms-slide">
<img src="http://ift.tt/1VBHZW8" alt="lorem ipsum dolor sit" />
<p class="words">View All Articles DIY: How to Make a Dreamcatcher There’s something so effortlessly chic about a DIY dreamcatcher! From their flowing feathers to their ethereal origins, dreamcatchers have a free-spirit that encourages us to embrace our dreamy
inclinations. Want to create your own? Explore your bohemian side with this step-by-step DIY Dreamcatcher guide! More
</p>
</div>
<div class="ms-slide">
<img src="http://ift.tt/1S4rlsP" alt="lorem ipsum dolor sit" />
</div>
<div class="ms-slide">
<img src="http://ift.tt/1VBHXxt" alt="lorem ipsum dolor sit" />
</div>
<div class="ms-slide">
<img src="http://ift.tt/1S4rnAJ" data-src="img/4.jpg" alt="lorem ipsum dolor sit" />
</div>
<div class="ms-slide">
<img src="http://ift.tt/1S4rnAJ" data-src="img/5.jpg" alt="lorem ipsum dolor sit" />
</div>
<div class="ms-slide">
<img src="http://ift.tt/1S4rnAJ" data-src="img/6.jpg" alt="lorem ipsum dolor sit" />
</div>
<div class="ms-slide">
<img src="http://ift.tt/1S4rnAJ" data-src="img/7.jpg" alt="lorem ipsum dolor sit" />
</div>
</div>
<!-- end of masterslider -->
</div>
<!-- end of template -->
</body>
<script type="text/javascript">
var slider = new MasterSlider();
slider.control('arrows');
slider.control('bullets', {
autohide: false,
align: 'bottom',
margin: 10
});
slider.setup('masterslider', {
width: 750,
height: 430,
layout: 'partialview',
space: 5,
view: 'basic',
loop: true,
filters: {
grayscale: 1,
contrast: 1.5
}
});
</script>
</html>
slider carousel - place text under img not on top
Aucun commentaire:
Enregistrer un commentaire