Tag Archives: carousel

How to replace map with slider in header?

 

In version >=1.5.4:

Admin->Pages->Edit->change header template

In versions <=1.5.3:

There is 2 version of homepage templates, “homepage” and “homepage-slideshow”, you can select wanted template.

You want to replace map with slider on all pages?

Can be done with wanted template file customizations, just replace part of code that showing map, with part of code that showing slider, for example on classic page_page.php located in folder: templates\bootstrap2-responsive

Replace:

<input id="pac-input" class="controls" type="text" placeholder="{lang_Search}" />
<div class="wrap-map" id="wrap-map">
</div>

With this code:

<div class="wrap-map">
    <div id="myCarousel" class="carousel slide">
    <ol class="carousel-indicators">
    {slideshow_images}
    <li data-target="#myCarousel" data-slide-to="{num}" class="{first_active}"></li>
    {/slideshow_images}
    </ol>
    <!-- Carousel items -->
    <div class="carousel-inner">
    {slideshow_images}
        <div class="item {first_active}">
        <img alt="" src="{url}" />
        </div>
    {/slideshow_images}
    </div>
    <!-- Carousel nav -->
    <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
    <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
    </div>
</div>

You can also replace map with other type of content, if you need css customization, can be done in file: templates\bootstrap2-responsive\assets\css\styles.css

If you want to pause carousel then you can use something like this:

<script language="javascript">
$(document).ready(function(){
    $("#myCarousel").carousel('pause');
});
</script>