Szukam Zaimplementowanie slideru slippry.com na forum

Witam, szukałem podobnych tematów, jednak nigdzie nie znalazłem porad jasnych dla mnie krok po kroku z którymi bym sobie poradził
Chciałbym w miejscu logo umieścić slider na swoim forum, problem w tym że jestem w tym kompletnie zielony
Nie wiem czy dam radę, dlatego proszę o pomoc "jak dla ...."
Jeśli niema gotowego pluginu do tego (nie znalazłem) to poszukuję mistrza który powie mi dokłądnie krok po kroku jak to umieścić na forum, czyli co tworzyć, gdzie to znaleźć i gdzie co wstawić

Obojętnie jaki slider, może być na przykład http://slippry.com/examples/css-vs-jquery/

W szablonie header znajdź (nie będzie to identyczny kod, więc szukaj podobnego)

<a href="http://mar1986.nazwa.pl/index.php"><img src="http://mar1986.nazwa.pl/images/logo.png" alt="BB" title="BB"></a>

zamień na to, co masz na tej stronie co podałeś w HTML Markup, do szablonu headerinclude dodaj jQuery, pamiętaj tylko, żeby objąć ten kod tagami

<script>tutaj wstaw kod</script>

oraz to

<script type="text/javascript" src="{$mybb->asset_url}/jscripts/slippry.min.js"></script>

do global.css lub stworzonego przez siebie arkusza wrzuć

/**
*
* slippry v1.4.0 - Responsive content slider for jQuery
* http://slippry.com
*
* Authors: Lukas Jakob Hafner - @saftsaak
* Thomas Hurd - @SeenNotHurd
*
* Copyright 2016, booncon oy - http://booncon.com
*
*
* Released under the MIT license - http://opensource.org/licenses/MIT
*/

$color_high: #e24b70 !default; // highlight colour
$color_gray: #ccc !default; // neutral colour
$controls_size: 2.8em !default; // size of the next/ prev buttons
$pager_size: 1.2em !default; // size of the pager bubbles
$trans_ease: ease !default; // easing for the transitions
$mobile_break: 600px !default; // breakpoint to use some special mobile styling
$spinner_url: '/images/sy-loader.gif' !default;
$arrows_url: '/images/arrows.svg' !default;

@mixin animation ($animation) {
animation-name: $animation;
animation-fill-mode: forwards;
}

/* kenBurns animations, very basic */
@keyframes left-right {
0% {
transform: translateY(-20%) translateX(-10%);
}
100% {
transform: translateY(0%) translateX(10%);
}
}
@keyframes right-left {
0% {
transform: translateY(0%) translateX(10%);
}
100% {
transform: translateY(-20%) translateX(-10%);
}
}

/* added to the original element calling slippry */
.sy-box {
&.sy-loading {
.sy-slides-wrap, .sy-pager {
visibility: hidden;
}
background: url($spinner_url) 50% 50% no-repeat;
background-size: 32px;
min-height: 40px;
}
}
/* element that wraps the slides */
.sy-slides-wrap {
position: relative;
height: 100%;
width: 100%;
&:hover {
.sy-controls {
display: block;
}
}
}
/* element that crops the visible area to the slides */
.sy-slides-crop {
height: 100%;
width: 100%;
position: absolute;
overflow: hidden;
}
/* list containing the slides */
.sy-list {
&.horizontal {
transition: left $trans_ease;
}
&.vertical {
transition: top $trans_ease;
}
width: 100%;
height: 100%;
list-style: none;
margin: 0;
padding: 0;
position: absolute;
}
/* single slide */
.sy-slide {
position: absolute;
width: 100%;
z-index: 2;
&.kenburns {
width: 140%;
left: -20%;
&.useCSS {
&.sy-ken {
&:nth-child(1n) {
@include animation(left-right);
}
&:nth-child(2n) {
@include animation(right-left);
}
}
transition-property: opacity;
}
}
&.sy-active {
z-index: 3;
}
> img { // with one image as content -> full size
margin: 0;
padding: 0;
display: block;
width: 100%;
border: 0;
}
> a { // styling for link on whole slide
margin: 0;
padding: 0;
display: block;
width: 100%;
> img { // with one image as content -> full size
margin: 0;
padding: 0;
display: block;
width: 100%;
border: 0;
}
}
}
/* next/ prev buttons, with arrows and clickable area a lot larger than the visible buttons */
.sy-controls {
display: none;
list-style: none;
height: 100%;
width: 100%;
position: absolute;
padding: 0;
margin: 0;
li {
position: absolute;
width: 10%;
min-width: $controls_size * 1.5;
height: 100%;
z-index: 33;
&.sy-prev {
left: 0;
top: 0;
a {
&:after {
background-position: -5% 0;
}
}
}
&.sy-next {
right: 0;
top: 0;
a {
&:after {
background-position: 105% 0;
}
}
}
a {
position: relative;
width: 100%;
height: 100%;
display: block;
text-indent: -9999px;
&:link, &:visited {
opacity: 0.4;
}
&:hover, &:focus {
opacity: 0.8;
outline: none;
}
&:after {
content: "";
background-image: url($arrows_url);
background-repeat: no-repeat;
background-size: cover;
text-align: center;
text-indent: 0;
line-height: $controls_size;
color: #111;
font-weight: 800;
position: absolute;
background-color: #fff;
width: $controls_size;
height: $controls_size;
left: 50%;
top: 50%;
margin-top: -$controls_size / 2;
margin-left: -$controls_size / 2;
border-radius: 50%;
}
}
}
@media only screen and (max-device-width : $mobile_break) {
display: block;
$controls_size: $controls_size / 2;
li {
min-width: $controls_size * 1.5;
a {
&:after {
width: $controls_size;
height: $controls_size;
margin-top: -$controls_size / 2;
margin-left: -$controls_size / 2;
}
}
}
}
}
/* captions, styled fo the overlay variant */
.sy-caption-wrap {
position: absolute;
bottom: 2em;
z-index: 12;
left: 50%;
.sy-caption {
position: relative;
left: -50%;
background-color: rgba(0,0,0,0.54);
color: #fff;
padding: 0.4em 1em;
border-radius: 1.2em;
a {
&:link, &:visited {
color: $color_high;
font-weight: 600;
text-decoration: none;
}
&:hover, &:focus {
text-decoration: underline;
}
}
}
@media only screen and (max-device-width : $mobile_break), screen and (max-width : $mobile_break) {
left: 0;
bottom: 0.4em;
.sy-caption {
left: 0;
padding: 0.2em 0.4em;
font-size: 0.92em;
border-radius: 0;
}
}
}
/* pager bubbles */
.sy-pager {
clear: both;
display: block;
width: 100%;
margin: 1em 0 0;
padding: 0;
list-style: none;
text-align: center;
li {
display: inline-block;
width: $pager_size;
height: $pager_size;
margin: 0 1em 0 0;
border-radius: 50%;
&.sy-active {
a {
background-color: $color_high;
}
}
a {
width: 100%;
height: 100%;
display: block;
background-color: $color_gray;
text-indent: -9999px;
&:link, &:visited {
opacity: 1.0;
}
&:hover, &:focus {
opacity: 0.6;
}
background-size: 2em;
border-radius: 50%;
}
}
}
/* element to "keep/ fill" the space of the content, gets intrinsic height via js */
.sy-filler {
width: 100%;
&.ready {
transition: padding 600ms ease;
}
}


plik z załącznika wrzuć do /jscripts na serwerze (FTP)
  slippry.js (Rozmiar: 25,12 KB / Pobrań: 157)

ok,

znalazłem:

<a href="{$mybb->settings['bburl']}/index.php"><img src="{$theme['logo']}" alt="{$mybb->settings['bbname']}" title="{$mybb->settings['bbname']}" /></a>

wyrzuciłem to i w to miejsce wkleiłem poniższy kod:

<h3>CSS</h3>
<ul id="css-demo">
 <li>
   <a href="#slide1">
     <img src="/assets/img/image-1.jpg" alt="This is caption 1 <a href='#link'>Even with links!</a>">
   </a>
 </li>
 <li>
   <a href="#slide2">
     <img src="/assets/img/image-2.jpg"  alt="This is caption 2">
   </a>
 </li>
 <li>
   <a href="#slide3">
     <img src="/assets/img/image-3.jpg" alt="And this is some very long caption for slide 3. Yes, really long.">
   </a>
 </li>
 <li>
   <a href="#slide4">
     <img src="/assets/img/image-4.jpg" alt="And this is some very long caption for slide 4.">
   </a>
 </li>
</ul>
<h3>jQuery</h3>
<ul id="jquery-demo">
 <li>
   <a href="#slide1">
     <img src="/assets/img/image-1.jpg" alt="This is caption 1 <a href='#link'>Even with links!</a>">
   </a>
 </li>
 <li>
   <a href="#slide2">
     <img src="/assets/img/image-2.jpg"  alt="This is caption 2">
   </a>
 </li>
 <li>
   <a href="#slide3">
     <img src="/assets/img/image-3.jpg" alt="And this is some very long caption for slide 3. Yes, really long.">
   </a>
 </li>
 <li>
   <a href="#slide4">
     <img src="/assets/img/image-4.jpg" alt="And this is some very long caption for slide 4.">
   </a>
 </li>
</ul>


dalej:
nie mam szablonu headerinclude, nie widzę go









http://slippry.com/examples/css-vs-jquery/

Grupa szablonów niezgrupowane

ok, tak wygląda oryginalny headerinclude:

<link rel="alternate" type="application/rss+xml" title="{$lang->latest_threads} (RSS 2.0)" href="{$mybb->settings['bburl']}/syndication.php" />
<link rel="alternate" type="application/atom+xml" title="{$lang->latest_threads} (Atom 1.0)" href="{$mybb->settings['bburl']}/syndication.php?type=atom1.0" />
<meta http-equiv="Content-Type" content="text/html; charset={$charset}" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<script type="text/javascript" src="{$mybb->asset_url}/jscripts/jquery.js?ver=1806"></script>
<script type="text/javascript" src="{$mybb->asset_url}/jscripts/jquery.plugins.min.js?ver=1806"></script>
<script type="text/javascript" src="{$mybb->asset_url}/jscripts/general.js?ver=1810"></script>

{$stylesheets}
<script type="text/javascript">
<!--
lang.unknown_error = "{$lang->unknown_error}";

lang.select2_match = "{$lang->select2_match}";
lang.select2_matches = "{$lang->select2_matches}";
lang.select2_nomatches = "{$lang->select2_nomatches}";
lang.select2_inputtooshort_single = "{$lang->select2_inputtooshort_single}";
lang.select2_inputtooshort_plural = "{$lang->select2_inputtooshort_plural}";
lang.select2_inputtoolong_single = "{$lang->select2_inputtoolong_single}";
lang.select2_inputtoolong_plural = "{$lang->select2_inputtoolong_plural}";
lang.select2_selectiontoobig_single = "{$lang->select2_selectiontoobig_single}";
lang.select2_selectiontoobig_plural = "{$lang->select2_selectiontoobig_plural}";
lang.select2_loadmore = "{$lang->select2_loadmore}";
lang.select2_searching = "{$lang->select2_searching}";

var cookieDomain = "{$mybb->settings['cookiedomain']}";
var cookiePath = "{$mybb->settings['cookiepath']}";
var cookiePrefix = "{$mybb->settings['cookieprefix']}";
var cookieSecureFlag = "{$mybb->settings['cookiesecureflag']}";
var deleteevent_confirm = "{$lang->deleteevent_confirm}";
var removeattach_confirm = "{$lang->removeattach_confirm}";
var loading_text = '{$lang->ajax_loading}';
var saving_changes = '{$lang->saving_changes}';
var use_xmlhttprequest = "{$mybb->settings['use_xmlhttprequest']}";
var my_post_key = "{$mybb->post_code}";
var rootpath = "{$mybb->settings['bburl']}";
var imagepath = "{$theme['imgdir']}";
  var yes_confirm = "{$lang->yes}";
var no_confirm = "{$lang->no}";
var MyBBEditor = null;
var spinner_image = "{$theme['imgdir']}/spinner.gif";
var spinner = "<img src='" + spinner_image +"' alt='' />";
var modal_zindex = 9999;
// -->
</script>{$stylesheets}{$stylesheets}

dodałem te linie i tak wygląda zmodyfikowany headerinclude:

<link rel="alternate" type="application/rss+xml" title="{$lang->latest_threads} (RSS 2.0)" href="{$mybb->settings['bburl']}/syndication.php" />
<link rel="alternate" type="application/atom+xml" title="{$lang->latest_threads} (Atom 1.0)" href="{$mybb->settings['bburl']}/syndication.php?type=atom1.0" />
<meta http-equiv="Content-Type" content="text/html; charset={$charset}" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<script type="text/javascript" src="{$mybb->asset_url}/jscripts/jquery.js?ver=1806"></script>
<script type="text/javascript" src="{$mybb->asset_url}/jscripts/jquery.plugins.min.js?ver=1806"></script>
<script type="text/javascript" src="{$mybb->asset_url}/jscripts/general.js?ver=1810"></script>
<script type="text/javascript" src="{$mybb->asset_url}/jscripts/slippry.min.js"></script>

<script>
jQuery('#css-demo').slippry({
 // general elements & wrapper
 slippryWrapper: '<div class="sy-box css-demo" />', // wrapper to wrap everything, including pager
 // options
 adaptiveHeight: true, // height of the sliders adapts to current slide
 useCSS: true, // true, false -> fallback to js if no browser support
 autoHover: false,
 transition: 'horizontal'
});

jQuery('#jquery-demo').slippry({
 // general elements & wrapper
 slippryWrapper: '<div class="sy-box jquery-demo" />', // wrapper to wrap everything, including pager
 // options
 adaptiveHeight: false, // height of the sliders adapts to current slide
 useCSS: false, // true, false -> fallback to js if no browser support
 autoHover: false,
 transition: 'horizontal'
});

</script>




{$stylesheets}
<script type="text/javascript">
<!--
lang.unknown_error = "{$lang->unknown_error}";

lang.select2_match = "{$lang->select2_match}";
lang.select2_matches = "{$lang->select2_matches}";
lang.select2_nomatches = "{$lang->select2_nomatches}";
lang.select2_inputtooshort_single = "{$lang->select2_inputtooshort_single}";
lang.select2_inputtooshort_plural = "{$lang->select2_inputtooshort_plural}";
lang.select2_inputtoolong_single = "{$lang->select2_inputtoolong_single}";
lang.select2_inputtoolong_plural = "{$lang->select2_inputtoolong_plural}";
lang.select2_selectiontoobig_single = "{$lang->select2_selectiontoobig_single}";
lang.select2_selectiontoobig_plural = "{$lang->select2_selectiontoobig_plural}";
lang.select2_loadmore = "{$lang->select2_loadmore}";
lang.select2_searching = "{$lang->select2_searching}";

var cookieDomain = "{$mybb->settings['cookiedomain']}";
var cookiePath = "{$mybb->settings['cookiepath']}";
var cookiePrefix = "{$mybb->settings['cookieprefix']}";
var cookieSecureFlag = "{$mybb->settings['cookiesecureflag']}";
var deleteevent_confirm = "{$lang->deleteevent_confirm}";
var removeattach_confirm = "{$lang->removeattach_confirm}";
var loading_text = '{$lang->ajax_loading}';
var saving_changes = '{$lang->saving_changes}';
var use_xmlhttprequest = "{$mybb->settings['use_xmlhttprequest']}";
var my_post_key = "{$mybb->post_code}";
var rootpath = "{$mybb->settings['bburl']}";
var imagepath = "{$theme['imgdir']}";
  var yes_confirm = "{$lang->yes}";
var no_confirm = "{$lang->no}";
var MyBBEditor = null;
var spinner_image = "{$theme['imgdir']}/spinner.gif";
var spinner = "<img src='" + spinner_image +"' alt='' />";
var modal_zindex = 9999;
// -->
</script>{$stylesheets}{$stylesheets}

następnie, sorry, nie widzę global.css w szablonach, sorry za moją ciemnotę, ale ... no nie wiem gdzie to wrzucić

Bo to nie w szablonach, ACP -> Style i szablony -> klikasz na swój styl -> opcje, i tutaj wybierasz global.css

wrzuciłem poniższy kod na koniec w global.css

/**
*
* slippry v1.4.0 - Responsive content slider for jQuery
* http://slippry.com
*
* Authors: Lukas Jakob Hafner - @saftsaak
*          Thomas Hurd - @SeenNotHurd
*
* Copyright 2016, booncon oy - http://booncon.com
*
*
* Released under the MIT license - http://opensource.org/licenses/MIT
*/

$color_high: #e24b70 !default;     // highlight colour
$color_gray: #ccc !default;        // neutral colour
$controls_size: 2.8em !default;    // size of the next/ prev buttons
$pager_size: 1.2em !default;       // size of the pager bubbles
$trans_ease: ease !default;        // easing for the transitions
$mobile_break: 600px !default;     // breakpoint to use some special mobile styling
$spinner_url: '/images/sy-loader.gif' !default;
$arrows_url: '/images/arrows.svg' !default;

@mixin animation ($animation) {
 animation-name: $animation;
 animation-fill-mode: forwards;
}

/* kenBurns animations, very basic */
@keyframes left-right {
 0% {
   transform: translateY(-20%) translateX(-10%);
 }
 100% {
   transform: translateY(0%) translateX(10%);
 }
}
@keyframes right-left {
 0% {
   transform: translateY(0%) translateX(10%);
 }
 100% {
   transform: translateY(-20%) translateX(-10%);
 }
}

/* added to the original element calling slippry */
.sy-box {
 &.sy-loading {
   .sy-slides-wrap, .sy-pager {
     visibility: hidden;
   }
   background: url($spinner_url) 50% 50% no-repeat;
   background-size: 32px;
   min-height: 40px;
 }
}
/* element that wraps the slides */
.sy-slides-wrap {
 position: relative;
 height: 100%;
 width: 100%;
 &:hover {
   .sy-controls {
     display: block;
   }
 }
}
/* element that crops the visible area to the slides */
.sy-slides-crop {
 height: 100%;
 width: 100%;
 position: absolute;
 overflow: hidden;
}
/* list containing the slides */
.sy-list {
 &.horizontal {
   transition: left $trans_ease;
 }
 &.vertical {
   transition: top $trans_ease;
 }
 width: 100%;
 height: 100%;
 list-style: none;
 margin: 0;
 padding: 0;
 position: absolute;
}
/* single slide */
.sy-slide {
 position: absolute;
 width: 100%;
 z-index: 2;
 &.kenburns {
   width: 140%;
   left: -20%;
   &.useCSS {
     &.sy-ken {
       &:nth-child(1n) {
         @include animation(left-right);
       }
       &:nth-child(2n) {
         @include animation(right-left);
       }
     }
     transition-property: opacity;
   }
 }
 &.sy-active {
   z-index: 3;
 }
 > img { // with one image as content -> full size
   margin: 0;
   padding: 0;
   display: block;
   width: 100%;
   border: 0;
 }
 > a { // styling for link on whole slide
   margin: 0;
   padding: 0;
   display: block;
   width: 100%;
   > img { // with one image as content -> full size
     margin: 0;
     padding: 0;
     display: block;
     width: 100%;
     border: 0;
   }
 }
}
/* next/ prev buttons, with arrows and clickable area a lot larger than the visible buttons */
.sy-controls {
 display: none;
 list-style: none;
 height: 100%;
 width: 100%;
 position: absolute;
 padding: 0;
 margin: 0;
 li {
   position: absolute;
   width: 10%;
   min-width: $controls_size * 1.5;
   height: 100%;
   z-index: 33;
   &.sy-prev {
     left: 0;
     top: 0;
     a {
       &:after {
         background-position: -5% 0;
       }
     }
   }
   &.sy-next {
     right: 0;
     top: 0;
     a {
       &:after {
         background-position: 105% 0;
       }
     }
   }
   a {
     position: relative;
     width: 100%;
     height: 100%;
     display: block;
     text-indent: -9999px;
     &:link, &:visited {
       opacity: 0.4;
     }
     &:hover, &:focus {
       opacity: 0.8;
       outline: none;
     }
     &:after {
       content: "";
       background-image: url($arrows_url);
       background-repeat: no-repeat;
       background-size: cover;
       text-align: center;
       text-indent: 0;
       line-height: $controls_size;
       color: #111;
       font-weight: 800;
       position: absolute;
       background-color: #fff;
       width: $controls_size;
       height: $controls_size;
       left: 50%;
       top: 50%;
       margin-top: -$controls_size / 2;
       margin-left: -$controls_size / 2;
       border-radius: 50%;
     }
   }
 }
 @media only screen and (max-device-width : $mobile_break) {
   display: block;
   $controls_size: $controls_size / 2;
   li {
     min-width: $controls_size * 1.5;
     a {
       &:after {
         width: $controls_size;
         height: $controls_size;
         margin-top: -$controls_size / 2;
         margin-left: -$controls_size / 2;
       }
     }
   }
 }
}
/* captions, styled fo the overlay variant */
.sy-caption-wrap {
 position: absolute;
 bottom: 2em;
 z-index: 12;
 left: 50%;
 .sy-caption {
   position: relative;
   left: -50%;
   background-color: rgba(0,0,0,0.54);
   color: #fff;
   padding: 0.4em 1em;
   border-radius: 1.2em;
   a {
     &:link, &:visited {
       color: $color_high;
       font-weight: 600;
       text-decoration: none;
     }
     &:hover, &:focus {
       text-decoration: underline;
     }
   }
 }
 @media only screen and (max-device-width : $mobile_break), screen and (max-width : $mobile_break) {
   left: 0;
   bottom: 0.4em;
   .sy-caption {
     left: 0;
     padding: 0.2em 0.4em;
     font-size: 0.92em;
     border-radius: 0;
   }
 }
}
/* pager bubbles */
.sy-pager {
 clear: both;
 display: block;
 width: 100%;
 margin: 1em 0 0;
 padding: 0;
 list-style: none;
 text-align: center;
 li {
   display: inline-block;
   width: $pager_size;
   height: $pager_size;
   margin: 0 1em 0 0;
   border-radius: 50%;
   &.sy-active {
     a {
       background-color: $color_high;
     }
   }
   a {
     width: 100%;
     height: 100%;
     display: block;
     background-color: $color_gray;
     text-indent: -9999px;
     &:link, &:visited {
       opacity: 1.0;
     }
     &:hover, &:focus {
       opacity: 0.6;
     }
     background-size: 2em;
     border-radius: 50%;
   }
 }
}
/* element to "keep/ fill" the space of the content, gets intrinsic height via js */
.sy-filler {
 width: 100%;
 &.ready {
   transition: padding 600ms ease;
 }
}

plik z załącznika wrzuć do /jscripts na serwerze (FTP)  - zrobione


efekt taki, jak widać na stronie forum - nie do końca chyba wszystko działa ?

chyba nie ma wgranych obrazków

hehe, obrazki wrzuciłem, ale to miało trochę inaczej wyglądać
miało się zmieniać

---

obrazki wrzuciłem w /assets/img/image-2.jpg

Nie wrzucaj tamtego do css, a to:


/**
*
* slippry v1.4.0 - Responsive content slider for jQuery
* http://slippry.com
*
* Authors: Lukas Jakob Hafner - @saftsaak
* Thomas Hurd - @SeenNotHurd
*
* Copyright 2016, booncon oy - http://booncon.com
*
*
* Released under the MIT license - http://opensource.org/licenses/MIT
*/
/* kenBurns animations, very basic */
@keyframes left-right {
0% {
transform: translateY(-20%) translateX(-10%);
}
100% {
transform: translateY(0%) translateX(10%);
}
}
@keyframes right-left {
0% {
transform: translateY(0%) translateX(10%);
}
100% {
transform: translateY(-20%) translateX(-10%);
}
}
/* added to the original element calling slippry */
.sy-box.sy-loading {
background: url("/images/sy-loader.gif") 50% 50% no-repeat;
background-size: 32px;
min-height: 40px;
}
.sy-box.sy-loading .sy-slides-wrap, .sy-box.sy-loading .sy-pager {
visibility: hidden;
}

/* element that wraps the slides */
.sy-slides-wrap {
position: relative;
height: 100%;
width: 100%;
}
.sy-slides-wrap:hover .sy-controls {
display: block;
}

/* element that crops the visible area to the slides */
.sy-slides-crop {
height: 100%;
width: 100%;
position: absolute;
overflow: hidden;
}

/* list containing the slides */
.sy-list {
width: 100%;
height: 100%;
list-style: none;
margin: 0;
padding: 0;
position: absolute;
}
.sy-list.horizontal {
transition: left ease;
}
.sy-list.vertical {
transition: top ease;
}

/* single slide */
.sy-slide {
position: absolute;
width: 100%;
z-index: 2;
}
.sy-slide.kenburns {
width: 140%;
left: -20%;
}
.sy-slide.kenburns.useCSS {
transition-property: opacity;
}
.sy-slide.kenburns.useCSS.sy-ken:nth-child(1n) {
animation-name: left-right;
animation-fill-mode: forwards;
}
.sy-slide.kenburns.useCSS.sy-ken:nth-child(2n) {
animation-name: right-left;
animation-fill-mode: forwards;
}
.sy-slide.sy-active {
z-index: 3;
}
.sy-slide > img {
margin: 0;
padding: 0;
display: block;
width: 100%;
border: 0;
}
.sy-slide > a {
margin: 0;
padding: 0;
display: block;
width: 100%;
}
.sy-slide > a > img {
margin: 0;
padding: 0;
display: block;
width: 100%;
border: 0;
}

/* next/ prev buttons, with arrows and clickable area a lot larger than the visible buttons */
.sy-controls {
display: none;
list-style: none;
height: 100%;
width: 100%;
position: absolute;
padding: 0;
margin: 0;
}
.sy-controls li {
position: absolute;
width: 10%;
min-width: 4.2em;
height: 100%;
z-index: 33;
}
.sy-controls li.sy-prev {
left: 0;
top: 0;
}
.sy-controls li.sy-prev a:after {
background-position: -5% 0;
}
.sy-controls li.sy-next {
right: 0;
top: 0;
}
.sy-controls li.sy-next a:after {
background-position: 105% 0;
}
.sy-controls li a {
position: relative;
width: 100%;
height: 100%;
display: block;
text-indent: -9999px;
}
.sy-controls li a:link, .sy-controls li a:visited {
opacity: 0.4;
}
.sy-controls li a:hover, .sy-controls li a:focus {
opacity: 0.8;
outline: none;
}
.sy-controls li a:after {
content: "";
background-image: url("/images/arrows.svg");
background-repeat: no-repeat;
background-size: cover;
text-align: center;
text-indent: 0;
line-height: 2.8em;
color: #111;
font-weight: 800;
position: absolute;
background-color: #fff;
width: 2.8em;
height: 2.8em;
left: 50%;
top: 50%;
margin-top: -1.4em;
margin-left: -1.4em;
border-radius: 50%;
}
@media only screen and (max-device-width: 600px) {
.sy-controls {
display: block;
}
.sy-controls li {
min-width: 2.1em;
}
.sy-controls li a:after {
width: 1.4em;
height: 1.4em;
margin-top: -0.7em;
margin-left: -0.7em;
}
}

/* captions, styled fo the overlay variant */
.sy-caption-wrap {
position: absolute;
bottom: 2em;
z-index: 12;
left: 50%;
}
.sy-caption-wrap .sy-caption {
position: relative;
left: -50%;
background-color: rgba(0, 0, 0, 0.54);
color: #fff;
padding: 0.4em 1em;
border-radius: 1.2em;
}
.sy-caption-wrap .sy-caption a:link, .sy-caption-wrap .sy-caption a:visited {
color: #e24b70;
font-weight: 600;
text-decoration: none;
}
.sy-caption-wrap .sy-caption a:hover, .sy-caption-wrap .sy-caption a:focus {
text-decoration: underline;
}
@media only screen and (max-device-width: 600px), screen and (max-width: 600px) {
.sy-caption-wrap {
left: 0;
bottom: 0.4em;
}
.sy-caption-wrap .sy-caption {
left: 0;
padding: 0.2em 0.4em;
font-size: 0.92em;
border-radius: 0;
}
}

/* pager bubbles */
.sy-pager {
clear: both;
display: block;
width: 100%;
margin: 1em 0 0;
padding: 0;
list-style: none;
text-align: center;
}
.sy-pager li {
display: inline-block;
width: 1.2em;
height: 1.2em;
margin: 0 1em 0 0;
border-radius: 50%;
}
.sy-pager li.sy-active a {
background-color: #e24b70;
}
.sy-pager li a {
width: 100%;
height: 100%;
display: block;
background-color: #ccc;
text-indent: -9999px;
background-size: 2em;
border-radius: 50%;
}
.sy-pager li a:link, .sy-pager li a:visited {
opacity: 1.0;
}
.sy-pager li a:hover, .sy-pager li a:focus {
opacity: 0.6;
}

/* element to "keep/ fill" the space of the content, gets intrinsic height via js */
.sy-filler {
width: 100%;
}
.sy-filler.ready {
transition: padding 600ms ease;
}


@Ardex musiał niezauwazyć i dać nieskompilowany kod.

podmieniłem ten kod w Global.CSS ale, bez zmian, nadal to samo

dodatkowo, to czy

<script type="text/javascript" src="{$mybb->asset_url}/jscripts/slippry.min.js"></script>

ma zawierać slippry.min.js ?
nazwa pliku to slippry.js

może powinno być

<script type="text/javascript" src="{$mybb->asset_url}/jscripts/slippry.js"></script>

może tak ?

powinno być:

<script type="text/javascript" src="{$mybb->asset_url}/jscripts/slippry.js"></script> 


zmienione, niema efektu żadnego

---

sprawdziłem jeszcze raz plik na serwerze ftp jest ok

może coś w headerze nie tak pewnie ?

jak coś to utworzyłem też użytkownika z urawnieniami admina:
user: -
pass: -

Nie podawaj pasów do ACP !!!!!!!
@mar1986

Pokaż szablon header

ale to testowe forum, tu nic niema, potem i tak wszystko na czysto założę, narazie szykuję skrypty, a potem wszystko wgram na czysto jak już wszystko będzie działać

nie znam się na css i js, ale ten header mi się nie podoba