<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div class="container text-center"> <h3>360° Ürün Döndürme (mobile compatible)</h3> <div id="viewer" class="img-responsive center-block"></div> <div class="controls"> <button id="prev" class="btn btn-default"><span class="glyphicon glyphicon-chevron-left"></span> Geri</button> <button id="toggleAuto" class="btn btn-info"><span class="glyphicon glyphicon-play"></span> Play</button> <button id="next" class="btn btn-default">İleri <span class="glyphicon glyphicon-chevron-right"></span></button> </div> </div> </div> </div>

#viewer { max-width: 100%; background-repeat: no-repeat; background-size: contain; background-position: center center; border: 2px solid #ccc; cursor: grab; margin: 0 auto; } .controls { margin-top: 15px; text-align: center; }

const imageUrls = [ "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbk496SYhSlLuaDKrt4wQNQ2GTe-_3q034lV58XLwdEzxyHAec_bcNjTNqlDZMRNLHn7lysCHlqEGlYsCmqMtOBwXCZwCPPKwRWMWRDpW8uvZE6p6rCdye7IdrgGkMaSc-vVupqdig-RtgcnE4CfEGd3v0Ugp8GESgNsj6x9QfbWhbIlLo0UrLzK2lJqu4/s1600/image-10.jpg", "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoB675WLVWXv4Ku0TwPtF7ObfmQ2xcokVKt3h8c-IO360il44hgIxXGdETCJQIrjtv0cHmyDtRzfLSVJ2IwcJuiE8lRmQTiEvA5WnEIKtshyHnF_-WZkJPcwIRxvduuwosInvXZS1IYJCp7gPWaIGcXBR41v20lQWgk1MclOg7B85TBSabYMaXc2xDIe_v/s1600/image-09.jpg", "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg23V0YwPFwUo_dNiyZJdwufi-2RexJ3UN8D1DgquUHs3gBe1-rbeFnozTRqB8BAMFkysRV74FfPzA6Px_axsuUcz2uxmsPHwIlMu0kfUdYvoyBoK2h-X0MzRBsmzS_DyBt2R_CRf3uSSHlXLnB30MdTRSp_sdsO7FztV7SA6BIi4H3yxlvKpSEyvoHZqtw/s1600/image-16.jpg", "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJp_hiHCRPHf08Sqvn6nq3628DpAOBtH0MRLf-XMzbvsUme_TH7yle6d19MTuD4ZMyi_gwuArfUhFm6sozaP7MoPuiWMKGoR4BdGDpbFDSVvqm3wr2c2X1vul3IL62cZfnS2JNOUvjwmhnN2f8s_fp1ZvvQOiJ2U36QZi7LmiRzzbjElYzqZ-CSto8TAoo/s1600/image-15.jpg", "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnn61i77nOzj5oE-9J82JYFvTjavcMQWwqpYNhhhUZLeCkdSWptNlFBGcipbg7WMwWUu0qWP3f2aPaNr67nJocHKB7acjc0dKBAki5at3roey3j4qweXrCTmzuDw07vFHFMALw_q9aCF7GrndmmyT2N3qauANZYJpxm3CM3SoqS34zWN4aLcXH8Yqb50vu/s1600/image-14.jpg", "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkkLd2jdtG6uUhYxh5Cu_QsvckdaecKNuE4dgSglRKhPZeKIebCf989BwiWCRBzFep69iV_0kLMYAJmYJ5lZsZK50i-87aEz0LTos5tZpCnth6poFxjbNo0sGS55FcVc_Y2EwL0HKdkGXx6CoW_nyk3IjeVuTl0DLotyBuG0yzQzBfJhl8PbI-g0Ihcaue/s1600/image-13.jpg", "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmToUYZLjvpD_382xXm49IPKp192NoKmlKKUlh0sD8CTlYxoF-dIctE2sAXZmF6GCxfI71qqNwrHdnHYHx_6py_0rKLL9LXrUZl6XF0qfoKM4v6y0wnuNFmA0sUeTNT28oqmEhV0vKV4mr4GQgTX4VcRlIbrLTw9Wru0N3g-NQVsBOxzsDZv-aTmVuxBjg/s1600/image-12.jpg", "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjK4EYTUaN41LZJJZciAJncehZwKrLFzbWbeNuotRkUnejfCxI5_Lqtoq7RZ8XTSKAEUQ315_zLN3nKXNEJ-ciIgw-1u4wPjCfWuIcQ79aHKLkBZgySBY8FBJj65q-B_TXlCTXP4gv3Q6Del8JO7jpXey6TA-eymXME5uC3mcGu7skR3wWuoVatJ5lHgX76/s1600/image-11.jpg" ]; let currentFrame = 0; let dragging = false; let startX = 0; let autoplay = false; let autoplayInterval; let aspectRatio = 1; const viewer = $('#viewer'); // Yüksekliği yeniden ayarlayan fonksiyon function resizeViewer() { const viewerWidth = viewer.width(); viewer.height(viewerWidth * aspectRatio); } // İlk görselin oranına göre başlat const tempImg = new Image(); tempImg.onload = function () { aspectRatio = this.height / this.width; resizeViewer(); updateImage(); }; tempImg.src = imageUrls[0]; // Ekran boyutu değişince yeniden oranla $(window).on('resize', resizeViewer); // Görsel güncelle function updateImage() { viewer.css('background-image', `url('${imageUrls[currentFrame]}')`); } function nextFrame() { currentFrame = (currentFrame + 1) % imageUrls.length; updateImage(); } function prevFrame() { currentFrame = (currentFrame - 1 + imageUrls.length) % imageUrls.length; updateImage(); } // Sürükleme olayı viewer.on('mousedown touchstart', function(e) { dragging = true; startX = e.pageX || e.originalEvent.touches[0].pageX; }); $(document).on('mouseup touchend', function() { dragging = false; }); $(document).on('mousemove touchmove', function(e) { if (dragging) { const moveX = e.pageX || e.originalEvent.touches[0].pageX; const dx = moveX - startX; if (Math.abs(dx) > 5) { dx > 0 ? prevFrame() : nextFrame(); startX = moveX; } } }); // Butonlar $('#prev').click(prevFrame); $('#next').click(nextFrame); $('#toggleAuto').click(function() { autoplay = !autoplay; if (autoplay) { autoplayInterval = setInterval(nextFrame, 300); $(this).html("<span class='glyphicon glyphicon-pause'></span> Pause"); } else { clearInterval(autoplayInterval); $(this).html("<span class='glyphicon glyphicon-play'></span> Play"); } });