<!-- updated 01 -->
<? if ($module == 0): ?>
<div id="slideshow<?php echo $module; ?>" class="owl-carousel hidden-xs" style="opacity: 1;">
<?php $index=1; foreach ($banners as $banner) { ?>
<div class="item">
<?php if ($banner['link']) { ?>
<a href="<?php echo $banner['link']; ?>" onclick="dataLayerPush('select_promotion','<?=$banner["banner_image_id"]?>', '<?=$banner["title"]?>', '<?=$banner["title"]?> Slider', 'header',<?=$index?>)">
        <img data-src="<?php echo $banner['image']; ?>" alt="<?php echo $banner['title']; ?>" class="img-responsive lazyload" width="1500" height="500" />
      </a>
<?php } else { ?>
<img data-src="<?php echo $banner['image']; ?>" alt="<?php echo $banner['title']; ?>" class="img-responsive lazyload" width="1500" height="500" />
<?php } ?>
      <script>
        dataLayerPush('view_promotion',
                '<?=$banner["banner_image_id"]?>',
                '<?=$banner["title"]?>',
                '<?=$banner["title"]?> Slider',
                'header',
        <?=$index?>);
      </script>
    </div>
<?php $index++; } ?>
</div>
<script type="text/javascript"><!--
$('#slideshow<?php echo $module; ?>').owlCarousel({
items: 1,
autoPlay: 3000,
singleItem: true,
navigation: true,
navigationText: ['<i class="fa fa-chevron-left fa-5x"></i>', '<i class="fa fa-chevron-right fa-5x"></i>'],
pagination: true
});
--></script>
<? elseif ($module == 1): ?>
<br />

    <?php if ($bannerType == 1) { ?>

       <!-- owl 1 START -->
        <div class="row">

            <?php if (isset($bannerTitle) && !empty($bannerTitle)) { ?>
                <h1 style="text-align: center"><?=$bannerTitle?></h1>
            <?php } ?>

            <?php if (isset($bannerSubTitle) && !empty($bannerSubTitle)) { ?>
                <h3 class="subtitle_new_sets"><?=$bannerSubTitle?></h3>
            <?php } ?>

            <div class="categories-carousel1 owl-carousel">
                <?php foreach ($banners as $banner) { ?>
                <div class="item p-10" >
                    <a href="<?= $banner ['link']; ?>" class="filter_change">

                        <img class="img-responsive lazyloaded" data-src="<?= $banner ['no_cache_image']; ?>" title="<?=explode ("___[!]___", $banner["title"])[0]?>"
                        src="https://www.deercase.com/image/500x700.gif" alt="<?=explode ("___[!]___", $banner["title"])[0]?>" />

                        <strong style="display: flex; justify-content: center;font-size: 14px;margin-top: 5px;">
                        <?php
                            if (strpos($banner ['title'], '___[!]___')) {
                                echo explode ('___[!]___', $banner ['title']) [1];
                            } else {
                                echo $banner ['title'];
                            }
                        ?>
                        </strong>

                        <div style="display: flex; align-items: center;margin-top: 5px;">
                            <span style="margin: 0px auto;font-weight: 600;text-decoration: underline;">Koleksiyonu Göz At</span>
                        </div>

                        <br class="visible-xs" />
                        <br class="visible-xs" />

                    </a>
                </div>
                <?php } ?>
            </div>

            <script>
                jQuery (function ($) {
                    $('.categories-carousel1').owlCarousel ({
                        // items: 1,
                        nav: false,
                        loop:true,
                        center:false,
                        responsive: {
                            0: {
                                mouseDrag: false, // mobilde kaydırdıktan sonra tıklama sorununu çözer. - Can 17.01.2022
                                items: 2.1
                            },
                            768: {
                                mouseDrag: false, // tablette kaydırdıktan sonra tıklama sorununu çözer. - Can 17.01.2022
                                items: 2.1
                            },
                            1024: {
                                items: 3.5
                            },
                            1366: {
                                items: 3.5
                            }
                        }
                    });

                });

            </script>
        </div>
        <!-- owl END -->

    <?php } else if ($bannerType == 2) { ?>

        <!-- owl 1 START -->
        <div class="row">

            <?php if (isset($bannerTitle) && !empty($bannerTitle)) { ?>
                <h1 style="text-align: center"><?=$bannerTitle?></h1>
            <?php } ?>

            <?php if (isset($bannerSubTitle) && !empty($bannerSubTitle)) { ?>
                <h3 class="subtitle_new_sets"><?=$bannerSubTitle?></h3>
            <?php } ?>

            <div class="categories-carousel1 owl-carousel">
                <?php foreach ($banners as $banner) { ?>
                <div class="item p-10" >
                    <a href="<?= $banner ['link']; ?>" class="filter_change">

                        <img class="img-responsive lazyloaded" data-src="<?= $banner ['no_cache_image']; ?>" title="<?=explode ("___[!]___", $banner["title"])[0]?>"
                        src="https://www.deercase.com/image/500x700.gif" alt="<?=explode ("___[!]___", $banner["title"])[0]?>" />

                        <strong style="display: flex; justify-content: center;font-size: 14px;margin-top: 5px;">
                        <?php
                            if (strpos($banner ['title'], '___[!]___')) {
                                echo explode ('___[!]___', $banner ['title']) [1];
                            } else {
                                echo $banner ['title'];
                            }
                        ?>
                        </strong>

                        <div style="display: flex; align-items: center;margin-top: 5px;">
                            <span style="margin: 0px auto;font-weight: 600;text-decoration: underline;">Koleksiyonu Göz At</span>
                        </div>

                        <br class="visible-xs" />
                        <br class="visible-xs" />

                    </a>
                </div>
                <?php } ?>
            </div>

            <style>
                .subtitle_new_sets{
                    text-align: center; font-weight: 100;padding: 0 50px; font-size:12px;
                }

                .categories-carousel1 .owl-carousel .owl-nav button.owl-prev {
                    padding: 15px!important;
                }
                .categories-carousel1 .owl-carousel .owl-nav button.owl-next {
                    padding: 15px!important;
                }
                .categories-carousel1 {
                    /* margin-bottom: 25px !important;
                    padding-top: 60px !important; */
                }
                .categories-carousel1 .owl-stage {
                     /*margin-left: -150px;*/

                }
                .categories-carousel1 .owl-stage-outer {
                    margin-left: 20px !important;
                    margin-right: 30px !important;
                }
                
                .categories-carousel1 .owl-nav {
                    /*display: none !important;  Gizledik, şimdilik. */
                    justify-content: space-between !important;
                    display: flex !important;
                    width: 100% !important;
                    position: absolute;
                    top: 150px;
                }
                .categories-carousel1 .owl-nav .owl-prev,
                .categories-carousel1 .owl-nav .owl-next {
                    font-size: 70px !important;
                    outline: 0 !important;
                }

                .categories-carousel1-bottom {
                    margin-bottom: 25px !important;
                    padding-top: 60px !important;
                }

                .owl-carousel .owl-nav.disabled {
                    display: block !important;
                    
                }

                @media screen and (max-width: 768px) {
                    .categories-carousel1 .owl-stage-outer {
                        margin-left: 0px;
                        margin-right: 0px;
                    }
                    .subtitle_new_sets{
                    text-align: center; font-weight: 100;padding: 0 15px;
                    }
                    .categories-carousel1 {
                        margin-bottom: -25px !important;
                        padding-top: 0 !important;
                    }
                    
                    .categories-carousel1 .owl-nav {
                        display: none !important;
                    }
                    
                    .fixed-categories-carousel1 .item.p-10 {
                        padding-bottom: 0px !important;
                    }

                    
                    .owl-stage-outer {
                        max-height: 530px;
                    }
                    #ScrollToTop {
                        margin-bottom: 0px;
                    }

                }

                @media screen and (max-width: 568px) {
                    .owl-stage-outer {
                        max-height: 330px;
                    }
                }
                @media (max-width: 768px) {
                .common-home #content {
                    margin-top: 50px;
                }
                }
            </style>

            <script>
                jQuery (function ($) {
                    $('.categories-carousel1').owlCarousel ({
                        // items: 1,
                        nav: true,
                        loop:true,
                        center:false,
                        responsive: {
                            0: {
                                items: 2.1
                            },
                            768: {
                                items: 2.1
                            },
                            1024: {
                                items: 3.5
                            },
                            1366: {
                                items: 3.5
                            }
                        }
                    });

                });

            </script>
        </div>
        <!-- owl END -->

    <?php } else if ($bannerType == 3) { ?>

        <!-- owl 2 START -->
        <div class="row owl2container" >

            <?php if (isset($bannerTitle) && !empty($bannerTitle)) { ?>
                <h1 style="text-align: center"><?=$bannerTitle?></h1>
            <?php } ?>

            <?php if (isset($bannerSubTitle) && !empty($bannerSubTitle)) { ?>
                <h3 class="subtitle_new_sets"><?=$bannerSubTitle?></h3>
            <?php } ?>

            <div class="categories-carousel2 owl-carousel">
                <?php foreach ($banners as $banner) { ?>
                <div class="item p-10" >
                    <a href="<?= $banner ['link']; ?>" class="filter_change">

                        <img class="img-responsive lazyloaded" data-src="<?= $banner ['no_cache_image']; ?>" title="<?=explode ("___[!]___", $banner["title"])[0]?>"
                        src="https://www.deercase.com/image/500x700.gif" alt="<?=explode ("___[!]___", $banner["title"])[0]?>" />

                        <strong style="display: flex; justify-content: center;font-size: 14px;margin-top: 5px;">
                            <?php
                                    if (strpos($banner ['title'], '___[!]___')) {
                                        echo explode ('___[!]___', $banner ['title']) [1];
                                    } else {
                                        echo $banner ['title'];
                                    }
                                ?>
                        </strong>

                        <div style="display: flex; align-items: center;margin-top: 5px;">
                            <span style="margin: 0px auto;text-decoration: underline;font-weight: 600;">Koleksiyona Göz At</span>
                        </div>

                        <br class="visible-xs" />
                        <br class="visible-xs" />

                    </a>
                </div>
                <?php } ?>
            </div>

            <script>
                jQuery (function ($) {
                    $('.categories-carousel2').owlCarousel ({
                        // items: 1,
                        nav: true,
                        loop:true,
                        center:false,
                        responsive: {
                            0: {
                                mouseDrag: false, // mobilde kaydırdıktan sonra tıklama sorununu çözer. - Can 17.01.2022
                                items: 1.2
                            },
                            768: {
                                mouseDrag: false, // tablette kaydırdıktan sonra tıklama sorununu çözer. - Can 17.01.2022
                                items: 1.2
                            },
                            1024: {
                                items: 2.5
                            },
                            1366: {
                                items: 2.5
                            }
                        }
                    });

                });

            </script>
        </div>
        <!-- owl END -->

    <?php } ?>

<? elseif ($module == 2): ?>
<!-- owl 2 START -->
        <div class="row owl2container" >

            <?php if (isset($bannerTitle) && !empty($bannerTitle)) { ?>
                <h1 style="text-align: center"><?=$bannerTitle?></h1>
            <?php } ?>

            <?php if (isset($bannerSubTitle) && !empty($bannerSubTitle)) { ?>
                <h3 class="subtitle_new_sets"><?=$bannerSubTitle?></h3>
            <?php } ?>

            <div class="categories-carousel2 owl-carousel">
                <?php foreach ($banners as $banner) { ?>
                <div class="item p-10" >
                    <a href="<?= $banner ['link']; ?>" class="filter_change">

                        <img class="img-responsive lazyloaded" data-src="<?= $banner ['no_cache_image']; ?>" title="<?=explode ("___[!]___", $banner["title"])[0]?>"
                        src="https://www.deercase.com/image/500x700.gif" alt="<?=explode ("___[!]___", $banner["title"])[0]?>" />

                        <strong style="display: flex; justify-content: center;font-size: 14px;margin-top: 5px;">
                            <?php
                                    if (strpos($banner ['title'], '___[!]___')) {
                                        echo explode ('___[!]___', $banner ['title']) [1];
                                    } else {
                                        echo $banner ['title'];
                                    }
                                ?>
                        </strong>

                        <div style="display: flex; align-items: center;margin-top: 5px;">
                            <span style="margin: 0px auto;text-decoration: underline;font-weight: 600;">Koleksiyona Göz At</span>
                        </div>

                        <br class="visible-xs" />
                        <br class="visible-xs" />

                    </a>
                </div>
                <?php } ?>
            </div>

            <style>
                .subtitle_new_sets{
                    text-align: center; font-weight: 100;padding: 0 50px; font-size:12px;
                }
                .categories-carousel2 .owl-carousel .owl-nav button.owl-prev {
                    padding: 15px!important;
                }
                .categories-carousel2 .owl-carousel .owl-nav button.owl-next {
                    padding: 15px!important;
                }
                .categories-carousel2 {
                    /* margin-bottom: 25px !important;
                    padding-top: 60px !important; */
                }
                .categories-carousel2 .owl-stage {
                    /*margin-left: -150px;*/

                }
                .categories-carousel2 .owl-stage-outer {
                    margin-left: 20px;
                    margin-right: 30px;
                }
                .owl-carousel .owl-stage-outer {
                    margin-left: 20px !important;
                    margin-right: 30px !important;
                }
                .categories-carousel2 .owl-nav {
                    /*display: none !important;  Gizledik, şimdilik. */
                    justify-content: space-between !important;
                    display: flex !important;
                    width: 100% !important;
                    position: absolute;
                    top: 150px;
                }
                .categories-carousel2 .owl-nav .owl-prev,
                .categories-carousel2 .owl-nav .owl-next {
                    font-size: 70px !important;
                    outline: 0 !important;
                }

                .categories-carousel2-bottom {
                    margin-bottom: 25px !important;
                    padding-top: 60px !important;
                }

                .owl-carousel .owl-nav.disabled {
                    display: block !important;
                    justify-content: space-between !important;
                    display: flex !important;
                    width: 100% !important;
                    position: absolute;
                    top: 150px;
                    font-size: 70px !important;
                    outline: 0 !important;
                    
                }

                @media screen and (max-width: 768px) {
                    .categories-carousel2 .owl-stage-outer {
                        margin-left: 0px;
                        margin-right: 0px;
                    }
                    .owl-carousel .owl-nav.disabled {
                    display: none !important;
                    
                }
                    .owl-carousel .owl-stage-outer {
                        margin-left: 0px !important;
                        margin-right: 0px !important;
                    }
                    .subtitle_new_sets{
                    text-align: center; font-weight: 100;padding: 0 15px;
                    }
                    .owl2container {
                        /*background-color: #ECF3F7;*/
                    }
                    .categories-carousel2 {
                        margin-bottom: -25px !important;
                        padding-top: 0 !important;
                    }
                    .categories-carousel2 .owl-stage {
                        left: -15px !important;
                        padding-left: 20px !important;
                    }
                    .categories-carousel2 .owl-nav {
                        display: none !important;
                    }
                    .fixed-categories-carousel2 .owl-stage {
                        left: -15px !important;
                    }
                    .fixed-categories-carousel2 .item.p-10 {
                        padding-bottom: 0px !important;
                    }

                    
                    .owl-stage-outer {
                        max-height: 530px;
                    }
                    #ScrollToTop {
                        margin-bottom: 0px;
                    }

                }

                @media screen and (max-width: 568px) {
                    .owl-stage-outer {
                        max-height: 330px;
                    }

                }
            </style>

            <script>
                jQuery (function ($) {
                    $('.categories-carousel2').owlCarousel ({
                        // items: 1,
                        nav: true,
                        loop:true,
                        center:false,
                        responsive: {
                            0: {
                                mouseDrag: false, // mobilde kaydırdıktan sonra tıklama sorununu çözer. - Can 17.01.2022
                                items: 1.2
                            },
                            768: {
                                mouseDrag: false, // tablette kaydırdıktan sonra tıklama sorununu çözer. - Can 17.01.2022
                                items: 1.2
                            },
                            1024: {
                                items: 2.5
                            },
                            1366: {
                                items: 2.5
                            }
                        }
                    });

                });

            </script>
        </div>
        <!-- owl END -->
<? elseif ($module == 3): ?>
 <div class="row owl2container" >

            <?php if (isset($bannerTitle) && !empty($bannerTitle)) { ?>
                <h1 style="text-align: center"><?=$bannerTitle?></h1>
            <?php } ?>

            <?php if (isset($bannerSubTitle) && !empty($bannerSubTitle)) { ?>
                <h3 class="subtitle_new_sets"><?=$bannerSubTitle?></h3>
            <?php } ?>

            <div class="categories-carousel2 owl-carousel">
                <?php foreach ($banners as $banner) { ?>
                <div class="item p-10" >
                    <a href="<?= $banner ['link']; ?>" class="filter_change">

                        <img class="img-responsive lazyloaded" data-src="<?= $banner ['no_cache_image']; ?>" title="<?=explode ("___[!]___", $banner["title"])[0]?>"
                        src="https://www.deercase.com/image/500x700.gif" alt="<?=explode ("___[!]___", $banner["title"])[0]?>" />

                        <strong style="display: flex; justify-content: center;font-size: 14px;margin-top: 5px;">
                            <?php
                                    if (strpos($banner ['title'], '___[!]___')) {
                                        echo explode ('___[!]___', $banner ['title']) [1];
                                    } else {
                                        echo $banner ['title'];
                                    }
                                ?>
                        </strong>

                        <div style="display: flex; align-items: center;margin-top: 5px;">
                            <span style="margin: 0px auto;text-decoration: underline;font-weight: 600;">Koleksiyona Göz At</span>
                        </div>

                        <br class="visible-xs" />
                        <br class="visible-xs" />

                    </a>
                </div>
                <?php } ?>
            </div></div>
<? elseif ($module == 4): ?>
 <div class="row owl2container" >

            <?php if (isset($bannerTitle) && !empty($bannerTitle)) { ?>
                <h1 style="text-align: center"><?=$bannerTitle?></h1>
            <?php } ?>

            <?php if (isset($bannerSubTitle) && !empty($bannerSubTitle)) { ?>
                <h3 class="subtitle_new_sets"><?=$bannerSubTitle?></h3>
            <?php } ?>

            <div class="categories-carousel2 owl-carousel">
                <?php foreach ($banners as $banner) { ?>
                <div class="item p-10" >
                    <a href="<?= $banner ['link']; ?>" class="filter_change">

                        <img class="img-responsive lazyloaded" data-src="<?= $banner ['no_cache_image']; ?>" title="<?=explode ("___[!]___", $banner["title"])[0]?>"
                        src="https://www.deercase.com/image/500x700.gif" alt="<?=explode ("___[!]___", $banner["title"])[0]?>" />

                        <strong style="display: flex; justify-content: center;font-size: 14px;margin-top: 5px;">
                            <?php
                                    if (strpos($banner ['title'], '___[!]___')) {
                                        echo explode ('___[!]___', $banner ['title']) [1];
                                    } else {
                                        echo $banner ['title'];
                                    }
                                ?>
                        </strong>

                        <div style="display: flex; align-items: center;margin-top: 5px;">
                            <span style="margin: 0px auto;text-decoration: underline;font-weight: 600;">Koleksiyona Göz At</span>
                        </div>

                        <br class="visible-xs" />
                        <br class="visible-xs" />

                    </a>
                </div>
                <?php } ?>
            </div></div>


<? else: ?>
<!-- owl 1 START -->
        <div class="row owl2container">

            <?php if (isset($bannerTitle) && !empty($bannerTitle)) { ?>
                <h1 style="text-align: center"><?=$bannerTitle?></h1>
            <?php } ?>

            <?php if (isset($bannerSubTitle) && !empty($bannerSubTitle)) { ?>
                <h3 class="subtitle_new_sets"><?=$bannerSubTitle?></h3>
            <?php } ?>

            <div class="categories-carousel1 owl-carousel">
                <?php foreach ($banners as $banner) { ?>
                <div class="item p-10" >
                    <a href="<?= $banner ['link']; ?>" class="filter_change">

                        <img class="img-responsive lazyloaded" data-src="<?= $banner ['no_cache_image']; ?>" title="<?=explode ("___[!]___", $banner["title"])[0]?>"
                        src="https://www.deercase.com/image/500x500.gif" alt="<?=explode ("___[!]___", $banner["title"])[0]?>" />

                        <strong style="display: flex; justify-content: center;font-size: 14px;margin-top: 5px;">
                        <?php
                            if (strpos($banner ['title'], '___[!]___')) {
                                echo explode ('___[!]___', $banner ['title']) [1];
                            } else {
                                echo $banner ['title'];
                            }
                        ?>
                        </strong>

                        <div style="display: flex; align-items: center;margin-top: 5px;">
                            <span style="margin: 0px auto;font-weight: 600;text-decoration: underline;">Koleksiyonu Göz At</span>
                        </div>

                        <br class="visible-xs" />
                        <br class="visible-xs" />

                    </a>
                </div>
                <?php } ?>
            </div>

            <script>
                jQuery (function ($) {
                    $('.categories-carousel1').owlCarousel ({
                        // items: 1,
                        nav: false,
                        loop:true,
                        center:false,
                        responsive: {
                            0: {
                                mouseDrag: false, // mobilde kaydırdıktan sonra tıklama sorununu çözer. - Can 17.01.2022
                                items: 2.1
                            },
                            768: {
                                mouseDrag: false, // tablette kaydırdıktan sonra tıklama sorununu çözer. - Can 17.01.2022
                                items: 2.1
                            },
                            1024: {
                                items: 3.5
                            },
                            1366: {
                                items: 3.5
                            }
                        }
                    });

                });

            </script>
        </div>
        <!-- owl END -->

<? endif; ?>

<script>
    function isScrolledIntoView(element, product=true) {
        var windowHeight = window.innerHeight;
        var docViewTop = $(window).scrollTop();
        var docViewBottom = docViewTop + windowHeight;
        var elementTop = $(element).offset().top;
        var elementBottom = elementTop + $(element).height();//$(elem).height(); //top only
        //console.log($(element).data('datalayerid')+' - wTop:'+docViewTop+' wBottom:'+docViewBottom+' eTop:'+elementTop+' eBottom:'+elementBottom);
        if (product) {
            return (elementBottom>0 && elementTop>0 && (elementTop < docViewBottom) && (elementTop > docViewTop));
        } else {
            return (elementBottom>0 && elementTop>0 && (elementBottom < docViewBottom) && (elementTop > docViewTop));
        }

    }

    function checkBannerScroll() {
        $(".lazyloaded").each(function () {

            if (isScrolledIntoView(this)) {
                var imgUrl = $(this).data('src');
                $(this).attr('src', imgUrl);
            }

        });
    }

    checkBannerScroll();

    $(window).scroll(function(){
        checkBannerScroll();
    });
</script>