» » » » Carousel Slider Hakkında

Carousel Slider Hakkında

Mtemizce
Mtemizce 25-12-2016, 19:04
Merhaba, html den çevirdiğim bir temam var.Bootstrap less kullanılıyor temada. Jquery mevcut. Carousel slider da sorun yaşıyorum. Mutlaka daha önce de aynı sorunu yaşayan olmuştur ama aramamda uygun bir sonuç elde edemedim. Kaynak kodları ve benim denediğim yöntemleri ve resimlerini de paylaşacağım. Sorunu resimlere bakarak anlayabilirsiniz. Bilgisi olan arkadaşların yardımlarını rica ediyorum.
Slider html kodları orjinali şu şekildedir;


<div id="slideshow" class="bottom-border-shadow">
    <div class="container no-padding background-white bottom-border">
        <div class="row">
            <!-- Carousel Slideshow -->
            <div id="carousel-example" class="carousel slide" data-ride="carousel">
                <!-- Carousel Indicators-->
                <ol class="carousel-indicators">
                    <li data-target="#carousel-example" data-slide-to="0" class="active"></li>
                    <li data-target="#carousel-example" data-slide-to="1"></li>
                    <li data-target="#carousel-example" data-slide-to="2"></li>
                </ol>
                <div class="clearfix"></div>
                <!-- End Carousel Indicators -->
                <!-- Carousel Images -->
                <div class="carousel-inner">
					<div class="item active"><img src="slide1.jpg"></div>
					<div class="item"><img src="slide2.jpg"></div>
					<div class="item"><img src="slide3.jpg"></div>
                </div>
                <!-- End Carousel Images -->
                <!-- Carousel Controls -->
                <a class="left carousel-control" href="#carousel-example" data-slide="prev">
                    <span class="glyphicon glyphicon-chevron-left"></span>
                </a>
                <a class="right carousel-control" href="#carousel-example" data-slide="next">
                    <span class="glyphicon glyphicon-chevron-right"></span>
                </a>
                <!-- End Carousel Controls -->
            </div>
            <!-- End Carousel Slideshow -->
        </div>
    </div>
</div>


bu slider kullanmam için 2 dosya oluşturdum. Birinci dosyam modules klasörü içerisinde slider.tpl burada ana gövdeyi koydum. ikinci dosyam ise yine aynı klasörde slidertemplate.tpl bu dosyaya da div elementi ile oluşturulacak haber kodunu ekledim fakat slider çalışıyormu diye kontrol etmek için önce aşağıdaki gibi kodu sadece slider.tpl dosyasında kullandım ve normal çalıştı. Çalışır haldeki şekli alttaki resim gibidir;
Carousel Slider Hakkında


<div id="slideshow" class="bottom-border-shadow">
    <div class="container no-padding background-white bottom-border">
        <div class="row">
            <!-- Carousel Slideshow -->
            <div id="carousel-example" class="carousel slide" data-ride="carousel">
                <!-- Carousel Indicators
                <ol class="carousel-indicators">
                    <li data-target="#carousel-example" data-slide-to="0" class="active"></li>
                    <li data-target="#carousel-example" data-slide-to="1"></li>
                    <li data-target="#carousel-example" data-slide-to="2"></li>
                    <li data-target="#carousel-example" data-slide-to="3"></li>
                </ol>-->
                <div class="clearfix"></div>
                <!-- End Carousel Indicators -->
                <!-- Carousel Images -->
                <div class="carousel-inner">
                    <div class="item active"><img src="{THEME}/assets/img/slideshow/proje1.jpg"></div>
                    <div class="item"><img src="{THEME}/assets/img/slideshow/proje2.png"></div>
                    <div class="item"><img src="{THEME}/assets/img/slideshow/proje3.png"></div>
                </div>
                <!-- End Carousel Images -->
                <!-- Carousel Controls -->
                <a class="left carousel-control" href="#carousel-example" data-slide="prev">
                    <span class="glyphicon glyphicon-chevron-left"></span>
                </a>
                <a class="right carousel-control" href="#carousel-example" data-slide="next">
                    <span class="glyphicon glyphicon-chevron-right"></span>
                </a>
                <!-- End Carousel Controls -->
            </div>
            <!-- End Carousel Slideshow -->
        </div>
    </div>
</div>


Carousel indicator kısmı çalışmayacağını düşündüğüm için jquery blgimde olmadığı için yorum satırı olarak düzelttim kullanmadım yani.
Daha sonra aşağıdaki gibi kodları böldüm. Ve alttaki resimde görüldüğü gibi çalışmadı;
Carousel Slider Hakkında

slider.tpl;

<div id="slideshow" class="bottom-border-shadow">
    <div class="container no-padding background-white bottom-border">
        <div class="row">
            <!-- Carousel Slideshow -->
            <div id="carousel-example" class="carousel slide" data-ride="carousel">
                <!-- Carousel Indicators
                <ol class="carousel-indicators">
                    <li data-target="#carousel-example" data-slide-to="0" class="active"></li>
                    <li data-target="#carousel-example" data-slide-to="1"></li>
                    <li data-target="#carousel-example" data-slide-to="2"></li>
                    <li data-target="#carousel-example" data-slide-to="3"></li>
                </ol>-->
                <div class="clearfix"></div>
                <!-- End Carousel Indicators -->
                <!-- Carousel Images -->
                <div class="carousel-inner">
                    &#123;custom category="9" template="modules/slidertemplate" limit="5"}
                </div>
                <!-- End Carousel Images -->
                <!-- Carousel Controls -->
                <a class="left carousel-control" href="#carousel-example" data-slide="prev">
                    <span class="glyphicon glyphicon-chevron-left"></span>
                </a>
                <a class="right carousel-control" href="#carousel-example" data-slide="next">
                    <span class="glyphicon glyphicon-chevron-right"></span>
                </a>
                <!-- End Carousel Controls -->
            </div>
            <!-- End Carousel Slideshow -->
        </div>
    </div>
</div>


slidertemplate.tpl;

<div class="item active">
<img width="1080" height="422" src="[xfvalue_poster]">
</div>


Burada şöyle bir durum var. Resimde gördüğünüz üzere slider şablonunda birden fazla resim var. custom da limit olarak 5 verdim. 5 tane resmi bu şekilde sıraladı ama döngü yok. slidertemplate.tpl dosyasında ki div class ında active class ı kalınca bu resimler çıkıyor. active class ını silince hiç resim çıkmıyor. slidertemplate.tpl dosyasındaki div i slider.tpl dosyasına taşıyıp customu onun içine alıncada hiç birşey değişmiyor. sadece o belirttiğim active class ı olunca resimler alt alta sıralanıyor olmayınca gözükmüyor.
Çözüldü İşleme Alındı Bekliyor Çözülemedi

Benzer Konular

Bilgilendirme
Yorum Ekleyebilmeniz için Sitemize Kayıt Olmanız Gerekmektedir.
0
mesimov 4 Ocak 2017 17:54
@Mtemizce, O zaman Bootstrap slideri entegre ede biliriz.
Şikayet Et
0
Mtemizce 29 Aralık 2016 00:21
Çözümü şu şekilde buldum;


<div id="slideshow" class="bottom-border-shadow">
    <div class="container no-padding background-white bottom-border">
        <div class="row">
            <!-- Carousel Slideshow -->
            <div id="carousel-example" class="carousel slide" data-ride="carousel">
                <!-- Carousel Indicators-->
                <ol class="carousel-indicators">
                    <li data-target="#carousel-example" data-slide-to="0" class="active"></li>
                    <li data-target="#carousel-example" data-slide-to="1"></li>
                    <li data-target="#carousel-example" data-slide-to="2"></li>
                    <li data-target="#carousel-example" data-slide-to="3"></li>
                </ol>
                <div class="clearfix"></div>
                <!-- End Carousel Indicators -->
                <!-- Carousel Images -->
                <div class="carousel-inner">

                    &#123;custom category="9" template="modules/slidetempactive" limit="1"}
                   
                    &#123;custom category="9" template="modules/slidetempitem" limit="3" from="1"}
                </div>
                <!-- End Carousel Images -->
                <!-- Carousel Controls -->
                <a class="left carousel-control" href="#carousel-example" data-slide="prev">
                    <span class="glyphicon glyphicon-chevron-left"></span>
                </a>
                <a class="right carousel-control" href="#carousel-example" data-slide="next">
                    <span class="glyphicon glyphicon-chevron-right"></span>
                </a>
                <!-- End Carousel Controls -->
            </div>
            <!-- End Carousel Slideshow -->
        </div>
    </div>
</div>


Ana kodlar yukarıdaki gibi. Active ile çalışan max 1 tane sergileyecek, diğeri ise ilk çıkan harici diğerlerini göster mantığı ile custom a from="1" vererek active olmayan div slide sergiliyor.. Şimdi bunu çalıştırmak için 2 dosya lazımdı onlarda koddaki adından anlaşılacağı üzere biri active class ının kullanılacağı kullanacağımız slidetempactive.tpl, diğeri normal div kullanacağımız slidetempitem.tpl. onlarında kodları aşağıdaki gibi;

slidetempactive.tpl;

<div class="item active">
<img class="img-container" src="[xfvalue_poster]" alt="" />
</div>


slidetempitem.tpl;

<div class="item ">
    <img class="img-container" src="[xfvalue_poster]" alt="" />
</div>


img lerde class olarak img-container girdim. oda resim boyutlarını slider genişliğine otursun diye css e ekledim. Amaç şu, diyelimki benim slider için koymam gereken görsel boyutu 1080px x 420px ama benim yüklediğim 1500px x 560px , dolayısıyla slider görselin boyutuna göre yüksekliği değişiyordu. Bunu engellemek içinde css dosyama aşağıdaki kodu ekledim img yede o classı ekledim;

Css e eklenecek kod;

.img-container {
    height: 100%;
    max-height: 420px;
    width: 100%;
    max-width: 1080px;
}


Herkese iyi çalışmalar.
Şikayet Et
0
mesimov 27 Aralık 2016 19:50
Bootstrap olmayan js jquery slideri entegre ede bilirim. Örnek tasarladığım slider
Şikayet Et
0
Mtemizce 27 Aralık 2016 18:52
Active class ı yüzünden zaten sıkıntı :) jquery kodlarını incelemeye devam ediyorum yöntem bulursam ayarlayacağım inşallah.
Şikayet Et
0
mesimov 27 Aralık 2016 18:37
Bootstrap bilgim yok bu kodları denedim olmadı.
Şikayet Et
0
mrt806 26 Aralık 2016 19:38
anladığım kadarıyla mevzu class="item active" ile alakalı çünkü bu normalde hengi resmin aktif olacağını göstermek için ama sen onu slidertemplate.tpl içine öyle yazınca hepsini aktif ediyor ve o hatayla karşılaşıyorsun. Tam kod bilgim yok ama sen hangi temayı giydiriyorsan dle ye o temanın normal çalışan halinin linkini özelden yollarsan ben sana kullanılacak hale getirmeye çalışırım.
Şikayet Et
0
Mtemizce 26 Aralık 2016 18:54
@mesimov, Bu dosyalar karışık. Neyi nereye koyacağım anlaşılmıyor. Daha doğrusu inceledim dosyaları ve bunlar benim işime yarayacak dosyalar değil dostum. Benim hazır alt yapımı kullanacağım bir yöntem laızm. Yukarıda paylaştığım kodlarda yapacağım ufak tefek oynamalarla işi düzeltmem lazım. Yinede vakitt ayırdığın için teşekkürler.
Şikayet Et
0
mesimov 26 Aralık 2016 09:18
@Mtemizce, tamam.
Şikayet Et
0
Mtemizce 26 Aralık 2016 09:16
Eve gidince deneyeceğim localde tasarladığım için ofisten yapamıyorum. Teşekkür ederim. Sonucu buraya yazarım.
Şikayet Et
0
mesimov 26 Aralık 2016 09:11
Buna bak, çalışmalı .

@Mtemizce, çalışırsa kendi isteğine göre düzenleye bilirim ve ya verdiğin örenklerden birini entegre ederiz.
Şikayet Et
0
Mtemizce 26 Aralık 2016 09:05
Entegre ettiğim temanın slider'ı bu, aynı boyutlarda olduktan sonra başka slider da olur hiç sorun değil. yani bu tip bi slider yada aşağıda linkini verdiğim 2 örnek slider en çok işimi görecek olanlar;

1. Örnek
2. Örnek

Aslında ben işin mantığını kavramak anlamında bu slider ile uğraşıyorum başka denemiyorum. Ama fazla vakit kaybetmeye gerek yok dediğin gibi başka slider deneyelim :))

Slider ın tüm kodları yukarıda verdim. Exta bişey yok normal jquery ve bootstrap kullanıyor. Tabi bootstrap less kullanıyor oyüzden oynama yapmış olabilir fakat less kodları hangisi bulamadım.
Şikayet Et
0
mesimov 26 Aralık 2016 08:37
Bu sliderimi kullanmalısın yoksa başkası ola bilirmi? Kodları tam olarak paylaşırsan yardım etmeye çalışırım ama başka slider istersen entegre ede bilirim.
Şikayet Et