Webboard

Webboard > Wsparcie MyBB > Style, szablony i grafika > Zaimplementowanie slideru slippry.com na forum
Pełna wersja: Zaimplementowanie slideru slippry.com na forum
Aktualnie przeglądasz uproszczoną wersję forum. Kliknij tutaj, by zobaczyć wersję z pełnym formatowaniem.
Stron: 1 2 3

mar1986

15.08.2017, 13:59
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/

Ardex

15.08.2017, 14:14
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 -
* Thomas Hurd -
*
* 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;

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

/* kenBurns animations, very basic */
left-right {
0% {
transform: translateY(-20%) translateX(-10%);
}
100% {
transform: translateY(0%) translateX(10%);
}
}
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) {
animation(left-right);
}
&:nth-child(2n) {
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%;
}
}
}
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;
}
}
}
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)[attachment=12443]

mar1986

15.08.2017, 14:41
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/

Ardex

15.08.2017, 14:54
Grupa szablonów niezgrupowane

mar1986

15.08.2017, 15:26
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ć :P

Ardex

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

mar1986

15.08.2017, 17:26
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 -
*          Thomas Hurd -
*
* 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;

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

/* kenBurns animations, very basic */
left-right {
 0% {
   transform: translateY(-20%) translateX(-10%);
 }
 100% {
   transform: translateY(0%) translateX(10%);
 }
}
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) {
          animation(left-right);
       }
       &:nth-child(2n) {
          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%;
     }
   }
 }
  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;
     }
   }
 }
  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 ?

Patryk Stefański

15.08.2017, 19:26
chyba nie ma wgranych obrazków

mar1986

15.08.2017, 19:52
hehe, obrazki wrzuciłem, ale to miało trochę inaczej wyglądać :D
miało się zmieniać :D
obrazki wrzuciłem w /assets/img/image-2.jpg

Divir

15.08.2017, 21:20
Nie wrzucaj tamtego do css, a to:


/**
*
* slippry v1.4.0 - Responsive content slider for jQuery
* http://slippry.com
*
* Authors: Lukas Jakob Hafner -
* Thomas Hurd -
*
* Copyright 2016, booncon oy - http://booncon.com
*
*
* Released under the MIT license - http://opensource.org/licenses/MIT
*/
/* kenBurns animations, very basic */
left-right {
0% {
transform: translateY(-20%) translateX(-10%);
}
100% {
transform: translateY(0%) translateX(10%);
}
}
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%;
}
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;
}
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;
}

musiał niezauwazyć i dać nieskompilowany kod.

mar1986

15.08.2017, 21:30
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 ?

Patryk Stefański

15.08.2017, 21:43
powinno być:
Kod PHP:
<script type="text/javascript" src="{$mybb->asset_url}/jscripts/slippry.js"></script> 

mar1986

15.08.2017, 21:51
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: -

Patryk Stefański

15.08.2017, 21:55
Nie podawaj pasów do ACP !!!!!!!


Pokaż szablon header

mar1986

15.08.2017, 21:58
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
Stron: 1 2 3
Webboard > Wsparcie MyBB > Style, szablony i grafika > Zaimplementowanie slideru slippry.com na forum