![Mobil ve Tablet cihazlarla Uyumlu Resim Slider ve Galerileri Mobil ve Tablet cihazlarla Uyumlu Resim Slider ve Galerileri](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJfH-bg8bbofnWvtYfI1XPsO7fD5gEZNbyXGt4VbSe8wqcc6OqP0mws1VfC3tyQNI-mrezGTQPuVSKnyDj7y6PfpW863ZOLfCoB6MnUoqxL4LAWMhSsOgKboYptP0lrOmqp879nguD-WUV/s1600/mobil_ve_tablet_cihazlarla_uyumlu_resim_slider_ve_galerileri.png)
Günümüzde mobil teknolojilerinin yükselişi web tasarımcılarınıda mobil ve tablet cihazlarla uyumlu ve duyarlı eklentiler yazmaya sevketti. Birçok websitesi yada blog sahibinin en çok endişe ettikleri konu, sayfalarına ekledikleri herhangi bir kod yada eklentinin mobil uyumlu olup olmamasıdır. Bu yazımda sizler için arayıp bulduğum, piyasadaki mobil ve tablet cihazlarla uyumlu resim slider ve galerileri sizlerle paylaşacağım. Bunlar hem bütün tarayıcılarda hemde mobil ve tablet cihazlarla uyumlu ve dokunmatik duyarlı slider eklentileri. Önizleme butonuyla bakıp beğendiginizi indirebilir ve sayfanıza entegre edebilirsiniz.
1. Animated Responsive Image Grid
![Free Animated Responsive Image Grid Free Animated Responsive Image Grid](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhh_PyyW6eqDAvw9N5qq9CC3IJRjCBFPGR5XhIV4_1Rd8tjLoWi_GBe8KwkW3onhdy82tw9MrI6IZmVpIzhwjd0eNNnJxcvuPAhptC1nKAV3wJ7L2J55u_SQzDXwYqk50ik9MynHv-eUzU/s1600/Animated+Responsive+Image+Grid.png)
ÖNİZLEMEİNDİR
2. Sequence
![Draggable-Dual-View-Slideshow Draggable-Dual-View-Slideshow](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5DOfGvTZbG-JQIjI-7fsRLvXyApMUGNVs13Bu9Ua3Lw9Tx3-C95SM9qIBHvjyLvVY2asjkG_z69JELPIe80c7JNq8P44IjrTqGjPUtMEMSD4f1NFhnACgvgGJd79DWjNhLfyN3_7huCE/s1600/1329981419.jpg)
ÖNİZLEMEİNDİR
3. WmuSlider - Free jQuery Responsive slider
![wmuSlider - Free jQuery Responsive slider wmuSlider - Free jQuery Responsive slider](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhF9uPZdpQnVMqWZtbfoI0kUvXwCK-7LkCxXkYs1T-9J43_6ycDut9Whbnul7nOdZLXWAvUbn71eYXWyeLNMBwIJbKeA-Jkoka9ePikC_IfzuKcZ8LxpVZpJiAN81N44VzRYlzjjoTOSnw/s1600/wmuSlider.jpg)
ÖNİZLEMEİNDİR
4. iView Jquery Resim, Video ve içerik Slideri
![iView jquery resim, video ve içerik slideri iView jquery resim, video ve içerik slideri](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5y-BGSpmLcQ8Px588hhyphenhyphenb_XkAVg_FMtl2S-6ef7MEk4CO6PkfYIPRkgih16RDgAUlsupCM-io2Rv7ntAYQrgklx15Nnis-R2mJu8AmADJeXyE2VNLmU67971jwWhFsSNss-g1sliFjN9p/s1600/MeftunMEDE_iview_screenshot.jpg)
ÖNİZLEMEİNDİR
5. Photo Swipe Free jQuery Image Slider
![photoswipe Free jQuery Image Slider photoswipe Free jQuery Image Slider](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYXbRvDARm1W5fRzEwQ6JY1p2TMs2mz3-ssX-zI70ByFNXMV0IyOt1xoty3cy4yHUPO6fU15SBSk3v-EvVy9_My5Gex4IZFK5P6zIM_L093dmCdz6FkPPoRipqY-ZOEiCoj90K6MKGI48/s640/photoswipe.jpeg)
ÖNİZLEMEİNDİR
6. BxSlider
![BxSlider BxSlider](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4LhKaKP3_MlpKCHr-eHGz9Ylpa4DMZSHemvQMJa7_4d_5XhNcX5frtq3giD4j0DKIAxmN0nmVdLI3gKXsOcQl1wMZJrNnow9NknGFmNJea8txlFgb0Bd1PtnuQjFMiQZDrBcMk7CC/s1600/bxslider.png)
ÖNİZLEMEİNDİR
7. Swiper
![Swiper Slider Swiper Slider](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0bEaME4a6XZSWmXVBt1cuaAcdoZxoMlOKKg5gERJPmGhfUpXdt0-d_7EpTxXXFLGWHnfcHbZYqQUXSPrjecOy8dkiHM_8X_PXxfHa2CgIoA6BivyObE4rOHSuZAZ4FhOUnbK4Qb1-PJU/s1600/Swiper.jpg)
ÖNİZLEMEİNDİR
8. RTP. Slider
![RTP.Slider RTP.Slider](https://www.cssauthor.com/wp-content/uploads/2013/11/RTP-Slider.jpg)
ÖNİZLEMEİNDİR
9. Camera Slideshow
![Camera Slideshow Camera Slideshow](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNityr-nhfhaXAeIzWW0XywY5FTrHTQ6rVkVe83j_XGNUePpSSwt4dWXxxmkC-nkIysxVpR4An_AZiazSLuVfuNAIip1zDAGqwauMJemcePIauhgZRknIV6A6cnFVCP5gSkYxIBkvdvyTw/s1600/Camera_Slideshow.jpg)
ÖNİZLEMEİNDİR
10. Responsly
![Responsly Slideshow Responsly Slideshow](https://corpocrat.com/wp-content/uploads/2015/12/cloudragon.jpg)
ÖNİZLEMEİNDİR
11. Galleria
![Galleria image gallery Galleria image gallery](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTx1D2ZpzOHIld-O4CRCSNXDIIQIiSKQJxAEjcFJKb6qtu0kPEx3psBInRO8KXukdAxRy5KrxdN_Uukl3VycnXltjWtqL7UErtbSLuJw0G5fXihZu5Zn5VdRO6IuO34KwiXjsfcSlLOfMT/s1600/galleria.jpg)
ÖNİZLEMEİNDİR
12. Flexslider
![Flexslider Flexslider](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiL8SHwC05OfjL7FKaJTNsFfFwJm47kYlQ8UKFp5EACXKGSu1smX8H5Z9gOLsAqyUmh4qxEECKqh7IXw04Bp8h7RWwciQmAz2QRDwO2zL5biJUydHYGHqQkxKnjAvB63rcyXbHxHAiqrU16/s1600/flexslider2.jpg)
ÖNİZLEMEİNDİR
13. OWL Carousel
![OWL Carousel OWL Carousel](https://mennstudio.com/wp-content/uploads/2014/03/owl.jpg)
ÖNİZLEMEİNDİR
14. Divas Slider
![Divas Slider Divas Slider](https://js-tutorial.com/upload/images/slideshow/divas-slider/divas-slider.jpg)
ÖNİZLEMEİNDİR
15. Draggable Dual-View Slideshow
![Draggable-Dual-View-Slideshow Draggable-Dual-View-Slideshow](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2014/06/DRaggableDualViewSlideshow.png)
ÖNİZLEMEİNDİR
16. Morphing Devices Slideshow
![Morphing Devices Slideshow Morphing Devices Slideshow](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2013/05/MorphingDevices.jpg)
ÖNİZLEMEİNDİR
17. JQuery Immersive Slider
![Immersive jQuery Image Slider Immersive jQuery Image Slider](https://onextrapixel.com/wp-content/uploads/2013/10/immersive-slider.jpg)
ÖNİZLEMEİNDİR
18. Fotorama
![Fotorama Fotorama](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaZXT8HQbT9S-D4oqbSLbFVdrn3J5C8Tw16zA9pNheVV_uUsHQ3ST8oI8vyVgLKQZXiL3WfocYxtp7Xj5nOQQziiJOcYq3EkO6tnUFdFl1exZcJpi_4HgeefbtkvLLWdp0fzbDTYUWLm8/s625/fotoroma.jpg)
ÖNİZLEMEİNDİR
Herhangi birini kullanıp test etme olanağına sahip olan arkadaşlar, diğerlerininde bilgilendirilmesi açısından olumlu veya olumsuz bir değerlendirme yorumu yapabilirler.
Barış, huzur, sağlık ve bereket Arkadaşlar! Herkeze kolay gelsin.
Paylaşım için Teşekkürler. www.pendikbizim.com
YanıtlaSilHocam bunları indirdikten sonra (rar olarak) bloggera nasıl uygulayacağız?
YanıtlaSilSlider'in style kodlarını Blogger kontrol panelinizden;
SilŞablon → HTML'yi Düzenle sekmesine tıklayıp
]]></b:skin> kodunu bulup hemen üzerine ekleyin. Script kodlarını aynı şekilde </head> kodunundan önce. Ve son olarak asıl resimlerinizi eklediginiz div kodunu Yerleşim → Gadget Ekle → HTML/JavaScript sekmesinden istediginiz bölüme ekleyebilirsiniz.
hocam tam olarak anlamadım ve yapamadım resimli ve ya videolu anlatım gönderebilir misin vaktin olduğunda aslanbey.kv@gmail.com
YanıtlaSilMeftun Abıcım birşeyden rıcam olacakta easybuılder programı ile bu slaytları html kodu şeklınde blogerıma ekleyebılırmıyım acaba ,eğer ekleyemezsen nasıl bır yöntem kullanmamı tavsıye edersınız ? tesekkurler şimdiden :)
YanıtlaSilYa hiçbirinde kodlar olan dosyayı bulamadım mesela Animated Responsive Image Grid 'in kodu hangi dosyada nasıl yapacagız biraz açıklarmısınız Lütfen ????
YanıtlaSilYorum Gönder
Lütfen yalnızca yazı ile ilgili yorumlar yazın. Yazının konusu dışında iletmek veya sormak istediğiniz bir şey varsa iletişim formunu kullanın. Ve lütfen yorumlara tıklanabilir link yazmayın!