Latest Case Studies
Latest Case Studies
Module position: navhelper
Module class suffix: Not used
If you want to display your images like this you have to create a custom module and publish the custom module like below
Step-1:
Step-2:
Step-3:
Step-4:
Add the following code in your custom module
<div class="h-block h-block-6 white">
<div class="h-block-content">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li class="active" data-target="#myCarousel" data-slide-to="0"></li>
<li class="" data-target="#myCarousel" data-slide-to="1"></li>
<li class="" data-target="#myCarousel" data-slide-to="2"></li>
<li class="" data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<div class="row">
<div class="case-slider col-md-4">
<div class="carousel-caption">
<h3>Latest Case Studies</h3>
<p>Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum.</p>
<a href="#" class="hp-btn">Read the case study</a></div>
</div>
<div class="tablet-container col-md-8">
<div class="content">
<div class="image-block"><img src="images/themeparrot/carousel_images/latest_case_study-01.png" alt="casestudies1" /></div>
</div>
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="case-slider col-md-4">
<div class="carousel-caption">
<h3>Latest Case Studies</h3>
<p>Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum.</p>
<a href="#" class="hp-btn">Read the case study</a></div>
</div>
<div class="tablet-container col-md-8">
<div class="content">
<div class="image-block"><img src="images/themeparrot/carousel_images/latest_case_study-02.png" alt="casestudies2" /></div>
</div>
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="case-slider col-md-4">
<div class="carousel-caption">
<h3>Latest Case Studies</h3>
<p>Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum.</p>
<a href="#" class="hp-btn">Read the case study</a></div>
</div>
<div class="tablet-container col-md-8">
<div class="content">
<div class="image-block"><img src="images/themeparrot/carousel_images/latest_case_study-03.png" alt="casestudies3" /></div>
</div>
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="case-slider col-md-4">
<div class="carousel-caption">
<h3>Latest Case Studies</h3>
<p>Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum.</p>
<a href="#" class="hp-btn">Read the case study</a></div>
</div>
<div class="tablet-container col-md-8">
<div class="content">
<div class="image-block"><img src="images/themeparrot/carousel_images/latest_case_study-04.png" alt="casestudies4" /></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Last updated