<li data-transition="fade">
<img src="{$alanadi}{$site_dizin}{$slayt_resim_yol}{$slaytAna.icerik_resim}"
alt="{$slaytAna.alt_yazi_1}"
data-bgposition="right center"
data-bgpositionend="center center"
data-bgfit="cover"
data-bgrepeat="no-repeat"
data-kenburns="on"
data-duration="9000"
data-ease="Linear.easeNone"
data-scalestart="110"
data-scaleend="100"
data-rotatestart="0"
data-rotateend="0"
data-offsetstart="0 0"
data-offsetend="0 0"
data-bgparallax="0"
class="rev-slidebg">
<div class="tp-caption font-weight-extra-bold negative-ls-2" style="font-size: 24px; text-shadow: 3px 3px #b28552; color: #eeeeee;"
data-frames='[{"delay":1000,"speed":2000,"frame":"0","from":"sX:1.5;opacity:0;fb:20px;","to":"o:1;fb:0;","ease":"Power3.easeInOut"},{"delay":"wait","speed":300,"frame":"999","to":"opacity:0;fb:0;","ease":"Power3.easeInOut"}]'
data-x="left"
data-y="center"
data-voffset="['-90','-50','-50','-75']"
data-fontsize="['50','50','50','90']"
data-lineheight="['55','55','55','95']">
YAZI 1
</div>
<div class="tp-caption font-weight-light text-color-light" style="font-size: 24px; text-shadow: 1px 1px #b28552; color: #eeeeee;"
data-frames='[{"from":"opacity:0;","speed":300,"to":"o:1;","delay":2000,"split":"chars","splitdelay":0.05,"ease":"Power2.easeInOut"},{"delay":"wait","speed":1000,"to":"y:[100%];","mask":"x:inherit;y:inherit;s:inherit;e:inherit;","ease":"Power2.easeInOut"}]'
data-x="left"
data-y="center"
data-voffset="['-50','-50','-50','-75']"
data-fontsize="['36','36','36','70']"
data-lineheight="['20','20','20','55']"
style="color: #b5b5b5;">
YAZI 2
</div>
<div class="tp-caption font-weight-light text-color-light" style="font-size: 24px; text-shadow: 3px 3px #b28552; color: #eeeeee;"
data-frames='[{"from":"opacity:0;","speed":300,"to":"o:1;","delay":2000,"split":"chars","splitdelay":0.05,"ease":"Power2.easeInOut"},{"delay":"wait","speed":1000,"to":"y:[100%];","mask":"x:inherit;y:inherit;s:inherit;e:inherit;","ease":"Power2.easeInOut"}]'
data-x="left"
data-y="center"
data-voffset="['-15','-50','-50','-75']"
data-fontsize="['36','36','36','70']"
data-lineheight="['20','20','20','55']"
style="color: #b5b5b5;">
YAZI 3
</div>
</li> Revolution Slider Responsive Problemi
4
●77
- 22-11-2020, 22:12:59
Kimlik doğrulama veya yönetimden onay bekliyor.Merhaba. Wordpress için olmayan HTML Revolution Slider eklentisi kullanıyorum. Fakat slider üzerindeki yazılar responsive çalışmıyor. Bu konuda bilgisi olan varmı?
- 22-11-2020, 22:24:23Revilationer adlı üyeden alıntı: mesajı görüntüle
// Revolution Slider (function(theme, $) { theme = theme || {}; var instanceName = '__revolution'; var PluginRevolutionSlider = function($el, opts) { return this.initialize($el, opts); }; PluginRevolutionSlider.defaults = { sliderType: 'standard', sliderLayout: 'fullwidth', delay: 9000, gridwidth: 1170, gridheight: 500, spinner: 'spinner3', disableProgressBar: 'off', parallax: { type: 'off', bgparallax: 'off' }, navigation: { keyboardNavigation: 'on', keyboard_direction: 'horizontal', mouseScrollNavigation: 'on', onHoverStop: 'on', touch: { touchenabled: 'on', swipe_threshold: 75, swipe_min_touches: 1, swipe_direction: 'horizontal', drag_block_vertical: false }, arrows: { enable: true, hide_onmobile: false, hide_under: 0, hide_onleave: true, hide_delay: 200, hide_delay_mobile: 1200, left: { h_align: 'left', v_align: 'center', h_offset: 30, v_offset: 0 }, right: { h_align: 'right', v_align: 'center', h_offset: 30, v_offset: 0 } } }, /* ADDONS */ addOnTypewriter: { enable: false }, addOnWhiteboard: { enable: false, }, whiteboard: { movehand: { src: '../rs-plugin/revolution-addons/whiteboard/assets/images/hand_point_right.png', width: 400, height: 1000, handtype: 'right', transform: { transformX: 50, transformY: 50 }, jittering: { distance: '80', distance_horizontal: '100', repeat: '5', offset: '10', offset_horizontal: '0' }, rotation: { angle: '10', repeat: '3' } }, writehand: { src: '../rs-plugin/revolution-addons/whiteboard/assets/images/write_right_angle.png', width: 572, height: 691, handtype: 'right', transform: { transformX: 50, transformY: 50 }, jittering: { distance: '80', distance_horizontal: '100', repeat: '5', offset: '10', offset_horizontal: '0' }, rotation:{ angle: '10', repeat: '3' } } }, addOnParticles: { enable: false }, particles: { startSlide: "first", endSlide: "last", zIndex: "1", particles: { number: {value: 80}, color: {value: "#ffffff"}, shape: { type: "circle", stroke: {width: 0, color: "#ffffff", opacity: 1}, image: {src: ""} }, opacity: {value: 0.5, random: true, min: 0.25, anim: {enable: false, speed: 3, opacity_min: 0, sync: false}}, size: {value: 2, random: false, min: 30, anim: {enable: false, speed: 40, size_min: 1, sync: false}}, line_linked: {enable: true, distance: 150, color: "#ffffff", opacity: 0.4, width: 1}, move: {enable: true, speed: 6, direction: "none", random: true, min_speed: 6, straight: false, out_mode: "out"} }, interactivity: { events: {onhover: {enable: false, mode: "repulse"}, onclick: {enable: false, mode: "repulse"}}, modes: {grab: {distance: 400, line_linked: {opacity: 0.5}}, bubble: {distance: 400, size: 40, opacity: 0.4}, repulse: {distance: 200}} } }, addOnCountdown: { enable: false, targetdate: new Date().getTime() + 864000000, // [url]http://www.freeformatter.com/epoch-timestamp-to-date-converter.html[/url] slidechanges: [{days: 0, hours: 0, minutes: 0, seconds: 0, slide: 2}] }, addOnSlicey: { enable: false }, addOnFilmstrip: { enable: false }, addOnBeforeAfter : { enable: false, options: { cursor: "move", carousel: false, arrowStyles: { leftIcon: "fa-icon-caret-left", rightIcon: "fa-icon-caret-right", topIcon: "fa-icon-caret-up", bottomIcon: "fa-icon-caret-down", size: "35", color: "#ffffff", spacing: "10", bgColor: "transparent", padding: "0", borderRadius: "0" }, dividerStyles: { width: "1", color: "rgba(255, 255, 255, 0.5)" } } }, addOnPanorama: { enable: false }, addOnRevealer: { enable: false, }, revealer: { direction: "open_horizontal", color: "#ffffff", duration: "1500", delay: "0", easing: "Power2.easeInOut", overlay_enabled: true, overlay_color: "#000000", overlay_duration: "1500", overlay_delay: "0", overlay_easing: "Power2.easeInOut", spinner: "1", spinnerColor: "#006dd2", spinnerHtml: "<div class='rsaddon-revealer-spinner rsaddon-revealer-spinner-1'><div class='rsaddon-revealer-1'><span style='background: {{color}}'><\/span><span style='background: {{color}}'><\/span><span style='background: {{color}}'><\/span><span style='background: {{color}}'><\/span><span style='background: {{color}}'><\/span><span style='background: {{color}}'><\/span><span style='background: {{color}}'><\/span><span style='background: {{color}}'><\/span><span style='background: {{color}}'><\/span><span style='background: {{color}}'><\/span><\/div><\/div \/>" }, addOnDuotone: { enable: false }, addOnBubblemorph: { enable: false }, addOnDistortion: { enable: false } }; PluginRevolutionSlider.prototype = { initialize: function($el, opts) { if ($el.data(instanceName)) { return this; } this.$el = $el; this .setData() .setOptions(opts) .build() .events(); return this; }, setData: function() { this.$el.data(instanceName, this); return this; }, setOptions: function(opts) { this.options = $.extend(true, {}, PluginRevolutionSlider.defaults, opts, { wrapper: this.$el }); return this; }, build: function() { if (!($.isFunction($.fn.revolution))) { return this; } // Single Slider Class if(this.options.wrapper.find('> ul > li').length == 1) { this.options.wrapper.addClass('slider-single-slide'); // Remove Bullets // this.options.navigation.bullets.enable = false; $.extend(this.options.navigation, { bullets: { enable: false } }); } // Full Screen Class if(this.options.sliderLayout == 'fullscreen') { this.options.wrapper.closest('.slider-container').addClass('fullscreen-slider'); } // Initialize Revolution Slider this.options.wrapper.revolution(this.options); // Addon Init - Typewriter if(this.options.addOnTypewriter.enable) { RsTypewriterAddOn($, this.options.wrapper); } // Addon Init - Whiteboard if(this.options.addOnWhiteboard.enable) { this.options.wrapper.rsWhiteBoard(); } // Addon Init - Particles if(this.options.addOnParticles.enable) { RsParticlesAddOn(this.options.wrapper); } // Addon Init - Countdown if(this.options.addOnCountdown.enable) { tp_countdown(this.options.wrapper, this.options.addOnCountdown.targetdate, this.options.addOnCountdown.slidechanges); } // Addon Init - Slicey if(this.options.addOnSlicey.enable) { this.options.wrapper.revSliderSlicey(); } // Addon Init - Filmstrip if(this.options.addOnFilmstrip.enable) { RsFilmstripAddOn($, this.options.wrapper, '../rs-plugin/revolution-addons/filmstrip/', false); } // Addon Init - Before After if(this.options.addOnBeforeAfter.enable) { RevSliderBeforeAfter($, this.options.wrapper, this.options.addOnBeforeAfter.options); } // Addon Init - Panorama if(this.options.addOnPanorama.enable) { RsAddonPanorama($, this.options.wrapper); } // Addon Init - Revealer if(this.options.addOnRevealer.enable) { RsRevealerAddOn($, this.options.wrapper, this.options.revealer.spinnerHtml); } // Addon Init - Duotone if(this.options.addOnDuotone.enable) { RsAddonDuotone($, this.options.wrapper, true, "cubic-bezier(0.645, 0.045, 0.355, 1.000)", "1000"); } // Addon Init - Bubblemorph if(this.options.addOnBubblemorph.enable) { BubbleMorphAddOn($, this.options.wrapper, false); } // Addon Init - Distortion if(this.options.addOnDistortion.enable) { RsLiquideffectAddOn($, this.options.wrapper); } return this; }, events: function() { return this; } }; // expose to scope $.extend(theme, { PluginRevolutionSlider: PluginRevolutionSlider }); // jquery plugin $.fn.themePluginRevolutionSlider = function(opts) { return this.map(function() { var $this = $(this); if ($this.data(instanceName)) { return $this.data(instanceName); } else { return new PluginRevolutionSlider($this, opts); } }); } }).apply(this, [window.theme, jQuery]); - 22-11-2020, 22:38:11Hocam eğer direk slider div'i responsive olmuyor siteden taşıyorsa https://www.themepunch.com/revslider...nsive-setup-2/ js ayarlarını şuna göre yapın
eğer slider divi normal çalışıyor sadece yazıların konumları uygun olmuyorsa html kodu üzerindedata-x="['right','center','center','center']" data-y="['center','center','center','center']" data-hoffset="['400', '0', '0', '0']" data-voffset="['-125', '-70', '-70', '-80']"
kısımlarını örnekteki gibi diziler şeklinde yapın, yanlış hatırlamıyorsam soldan sağa doğru levellere göre oluyordu
Yanidata-hoffset="['400', '0', '0', '0']"
kısmında 400 değeri desktop için 0 değerleri onun altındakiler için uygulanıyordu
Umarım yardımcı olabilmişimdir şu revolution slider özellikleri vs bakımından wp harici kullanınca çok yorucu oluyor
https://www.themepunch.com/revslider...nsive-setup-2/ şurada anlatıldığı gibi js kodlarına breakpoints ekledikten sonra yukarıda yazdıklarım geçerli oluyor - 22-11-2020, 23:15:43Teşekkür ederim. Vertical sorunum vardı data-voffset değerlerinden sonuncusu ile çözdüm. Örn: data-voffset="['-90','-50','-50','-75']" -75 değerini istediğim konum için ayarladım.Revilationer adlı üyeden alıntı: mesajı görüntüle
