Webboard

Pełna wersja: Menucool Slider
Aktualnie przeglądasz uproszczoną wersję forum. Kliknij tutaj, by zobaczyć wersję z pełnym formatowaniem.
Dobry,
Wgrałem sobie menucool slider i chciałbym go delikatnie zmodyfikować na moje potrzeby. Chodzi mi o to by był mniejszy i mieścił się w sidebarze.
Rozumiem, że rozmiarami mam manipulować tylko w tym? Czy jest jakaś opcja by sam się dopasował do sidebara?

#sliderFrame, #sliderFrame div {
   box-sizing: content-box;
}
#sliderFrame
{
   width:700px;
   margin:0 auto; /*center-aligned*/
}

#slider, #slider .sliderInner {
   width:700px;height:306px;/* Must be the same size as the slider images */
   border-radius:3px;
}

#slider {
   background-color:white;
   position:relative;
   margin:0 auto; /*center-aligned*/
   transform: translate3d(0,0,0);
   box-shadow: 0px 1px 5px #999999;
}

A potem wrzucić sobie wszystko do Index?
<html>
<head>
   <title>Test</title>
   <link href="themes/1/js-image-slider.css" rel="stylesheet" type="text/css" />
   <script src="themes/1/js-image-slider.js" type="text/javascript"></script>
   <link href="generic.css" rel="stylesheet" type="text/css" />
</head>
<body>
   <div id="sliderFrame">
       <div id="slider">
           <a href="http://www.menucool.com/javascript-image-slider" target="_blank">
               <img src="images/image-slider-1.jpg" alt="Witajcie w OurWorlds" />
           </a>
           <img src="images/image-slider-2.jpg" />
           <img src="images/image-slider-3.jpg" alt="" />
           <img src="images/image-slider-4.jpg" alt="#htmlcaption" />
           <img src="images/image-slider-5.jpg" />
       </div>
   </div>

  <div class="div2">
       <ul>
           
       </ul>
   </div>
</body>
</html>

Do index gdzieś tu?
<div class="sidebar" style="float: right; width: 19%">
<table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder">
{$topStats['LastActiveThreads']}
{$topStats['LastThreads']}
{$topStats['MostViews']}
{$topStats['Posters']}
{$topStats['TimeOnline']}
</table>
</div>
Zalecam użycie czegoś prostszego, jeśli ma to być do panelu bocznego, np.:
https://codepen.io/cybrox/pen/cyiJI
https://codepen.io/muratyesilirmak/pen/keBcL

Jeśli musi być to koniecznie w/w slider, to tak - musisz tam wstawić, za </table>, lub przed <table>.

Pobawić się szerokościami width i dodać skalowanie obrazków (np. max-width:). Trochę czasu na zabawę trzeba poświęcić.
A jak powyższe wgrać? Chodzi mi o Twój drugi link. Próbowałem wrzucać to do indexu i css, ale nic to nie dawało prócz tego że forum całe się rozjeżdżało.
css do global.css
kod html do indexu ale i tak wszystko się rozjechało, całe forum czyli coś nie tak w css jest
Użyłem pierwszego slidera i w teorii jest on już w dobrym miejscu i działa, tylko że pokazuje pierwszy slajd, potem nie pokazuje nic, a na końcu wraca do pierwszego.

Naprawiłem, musiałem zmienić wartości:
z:
@-o-keyframes slide{
0%{margin-left: 0px;}
17%{margin-left: 0px;}
20%{margin-left: -800px;}
37%{margin-left: -800px;}
40%{margin-left: -1600px;}
57%{margin-left: -1600px;}
60%{margin-left: -2400px;}
77%{margin-left: -2400px;}
80%{margin-left: -3200px;}
100%{margin-left: -3200px;}
na:
0%{margin-left: 0px;}
17%{margin-left: 0px;}
20%{margin-left: -300px;}
37%{margin-left: -300px;}
40%{margin-left: -600px;}
57%{margin-left: -600px;}
60%{margin-left: -900px;}
77%{margin-left: -900px;}
80%{margin-left: -1200px;}
100%{margin-left: 0px;}


Dałoby się zrobić tak by nie było widać tła za sliderem? Forum ma niby być delikatnie przezroczyste by było widoczne tło, ale na tym sliderze chciałbym by tło nie prześwitywało.

Dodatkowo pokombinowałem trochę z MENUCOOL SLIDEREM i udało mi się zrobić wszystko tak jak chciałem, prócz przesunięcia go w prawo o 5 px( do tego sam dojdę), ale znalazłem jeden błąd mianowicie - slider przysłania okno i nie wiem jak do tego się zabrać.
[attachment=11544]
[attachment=11545]
Do klasy z panelem dodaj odpowiedni z-index.
wszystko cacy, dzięki