• 04-04-2020, 23:51:09
    #1
    Merhabalar aşağıda vermiş olduğum kodda birşeyler ters gidiyor. Resimler doğru düzgün dönmüyor yaridan sonra tekrar başlıyor ve çok hızlı geçiyor lütfen yardımlarınızı bekliyorum. Şimdiden herkese teşekkür eder sağlıklı günler dilerim.

    --------------- CODE --------------------------

    <style type="text/css">
    .altcont {
    position: relative;
    margin:50px 15% 1%;
    padding:3px;
    background: rgba(29, 43, 83, 0.89);
    background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);
    width:70%;
    overflow:hidden;
    }
    .marquee{
    display:block;
    position:relative;
    width:4900vh;
    height:290px;
    animation:scroll 1s linear infinite;
    padding:0px;
    }
    
    .marquee:hover {
    animation-play-state: paused
    }
    
    .img1 {
    width:150px;
    height:290px;
    background-color: hsla(14, 100%, 100%, 0.6);
    
    margin:5px;
    float:left;
    }
    
    /* Make it move */
    @keyframes scroll{
    0% {left:800px;}
    100% {left:-140px;}
    }
    
    </style>
    
    
    
    
    <div class="altcont">
    <div class="marquee">
    
    <?php $i = 1;while($i <= 193)
    { $i++;
    ?>
    <div class="img1">
    <?php echo $i;?>
    </div>
    
    <?php ;
    } ?>
    
    
    </div>

    Not : Css kısmında Marquee kisminin width boyunu 4900vh olarak ayarladım aksi taktirde resimleri aşagı atıyor.
  • 05-04-2020, 00:42:14
    #2
    https://codepen.io/scmanta/pen/BmmzVR böyle bir örnek var bakın isterseniz bu örneği bence uyarlayın.
  • 05-04-2020, 01:10:16
    #3
    CemaLi adlı üyeden alıntı: mesajı görüntüle
    https://codepen.io/scmanta/pen/BmmzVR böyle bir örnek var bakın isterseniz bu örneği bence uyarlayın.
    Teşekür ederim inceledim onuda fakat aynı sorun zaten ondada mevcut ben oradan örnek alarak yapmıştım.
  • 05-04-2020, 02:53:22
    #4
    CyprusDesign adlı üyeden alıntı: mesajı görüntüle
    Teşekür ederim inceledim onuda fakat aynı sorun zaten ondada mevcut ben oradan örnek alarak yapmıştım.
    aynen bende şimdi farkettim (:

    Şimdi ben 15 resim (150x290) şeklinde listeliyorum, bu belirtmiş olduğum rakam statik yalnız resim sayısı sanırım dinamik oluşturulacaktır. Yaptığım örnekte animasyon süresinide 15s yaptım yalnız daha fazla resim olursa yarıda kesmeler gene olacaktır.
    Bu sorunu css ile çözmek zor olur ve sağlıklı olmayabilir. Ben o yüzden bir jQuery eklentisi ile bu sorunu gidermeni tavsiye ederim;
    Slick eklenti örneği : https://codepen.io/michaelsmyth94/pen/wMJLaj (slick) eklentisi ile sonsuz döngü şeklinde marquee kullanmandır.
    Benim yapmış olduğum örnek ; https://codepen.io/CemaLi/pen/zYGVoKG
  • 05-04-2020, 15:36:42
    #5
    CemaLi adlı üyeden alıntı: mesajı görüntüle
    aynen bende şimdi farkettim (:

    Şimdi ben 15 resim (150x290) şeklinde listeliyorum, bu belirtmiş olduğum rakam statik yalnız resim sayısı sanırım dinamik oluşturulacaktır. Yaptığım örnekte animasyon süresinide 15s yaptım yalnız daha fazla resim olursa yarıda kesmeler gene olacaktır.
    Bu sorunu css ile çözmek zor olur ve sağlıklı olmayabilir. Ben o yüzden bir jQuery eklentisi ile bu sorunu gidermeni tavsiye ederim;
    Slick eklenti örneği : https://codepen.io/michaelsmyth94/pen/wMJLaj (slick) eklentisi ile sonsuz döngü şeklinde marquee kullanmandır.
    Benim yapmış olduğum örnek ; https://codepen.io/CemaLi/pen/zYGVoKG


    Çok teşekkür ederim Slick eklenti ile işimi halledebilirim sanırm.