[CSS 3] CSS de OWL Carousel

Bonjour,

J'aimerai faire un logo slider avec l'applet owl.carousel (http://owlgraphic.com/owlcarousel/index.html

Le CSS est composé de 2 fichiers owl.carousel.css et owl.theme.css. A ce que j'ai pu remarquer jusqu'à présent et surtout si j'utilise le mode custom qui me semble le plus approprié, car j'ai des logos rectangulaires qui sont tronqué avec le style acteul.

Mon soucis est dans le style de owl-item car j'aimerais que la largeur soit un peut plus grande. voici le résultat de mon chrome Inspector :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<html><head>
    <title></title>
    <meta content="text/html; charset=UTF-8" http-equiv="content-type">
    <!-- Owl Carousel Assets -->
    <link href="css/owl.carousel.css" rel="stylesheet">
    <link href="css/owl.theme.css" rel="stylesheet">
    <style>
    element.style  {
    width:500px ;
    }
    </style>
</head>
<body>
<div id="custom" class="owl-carousel owl-theme" style="opacity: 1; display: block;">
<div class="owl-wrapper-outer">
<div class="owl-wrapper" style="width: 8120px; left: -203px; display: block;">
<div class="owl-item" style="width: 203px;"><div class="item"><h1>1</h1></div></div>
<div class="owl-item" style="width: 203px;"><div class="item"><h1>2</h1></div></div>
<div class="owl-item" style="width: 203px;">
<div class="item"><h1>3</h1></div></div><div class="owl-item" style="width: 203px;">
<div class="item"><h1>4</h1></div></div><div class="owl-item" style="width: 203px;">
<div class="item"><h1>5</h1></div></div><div class="owl-item" style="width: 203px;">
<div class="item"><h1>6</h1></div></div><div class="owl-item" style="width: 203px;">
<div class="item"><h1>7</h1></div></div><div class="owl-item" style="width: 203px;">
<div class="item"><h1>8</h1></div></div><div class="owl-item" style="width: 203px;">
<div class="item"><h1>9</h1></div></div><div class="owl-item" style="width: 203px;">
<div class="item"><h1>10</h1></div></div><div class="owl-item" style="width: 203px;">
<div class="item"><h1>11</h1></div></div><div class="owl-item" style="width: 203px;">
<div class="item"><h1>12</h1></div></div><div class="owl-item" style="width: 203px;">
<div class="item"><h1>13</h1></div></div><div class="owl-item" style="width: 203px;">
<div class="item"><h1>14</h1></div></div><div class="owl-item" style="width: 203px;">
<div class="item"><h1>15</h1></div></div><div class="owl-item" style="width: 203px;">
<div class="item"><h1>16</h1></div></div><div class="owl-item" style="width: 203px;">
<div class="item"><h1>17</h1></div></div><div class="owl-item" style="width: 203px;">
<div class="item"><h1>18</h1></div></div><div class="owl-item" style="width: 203px;">
<div class="item"><h1>19</h1></div></div><div class="owl-item" style="width: 203px;">
<div class="item"><h1>20</h1>
</div>
</div>
</div>
</div>

Voci le code html :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
<html>
  <head>
    <title></title>
    <meta content="text/html; charset=UTF-8" http-equiv="content-type">
    <!-- Owl Carousel Assets -->
    <link href="css/owl.carousel.css" rel="stylesheet">
    <link href="css/owl.theme.css" rel="stylesheet">
    <style>
    element.style  {
    width:500px ;
    }
    </style>
</head>
<body>
 
  <div id="custom" class="owl-carousel owl-theme">   
  <div class="item"><h1>1</h1></div>
  <div class="item"><h1>2</h1></div>
  <div class="item"><h1>3</h1></div>
  <div class="item"><h1>4</h1></div>
  <div class="item"><h1>5</h1></div>
  <div class="item"><h1>6</h1></div>
  <div class="item"><h1>7</h1></div>
  <div class="item"><h1>8</h1></div>
  <div class="item"><h1>9</h1></div>
  <div class="item"><h1>10</h1></div>
  <div class="item"><h1>11</h1></div>
  <div class="item"><h1>12</h1></div>
  <div class="item"><h1>13</h1></div>
  <div class="item"><h1>14</h1></div>
  <div class="item"><h1>15</h1></div>
  <div class="item"><h1>16</h1></div>
  <div class="item"><h1>17</h1></div>
  <div class="item"><h1>18</h1></div>
  <div class="item"><h1>19</h1></div>
  <div class="item"><h1>20</h1></div>
</div>
 
 
  <script src="js/jquery-1.9.1.min.js"></script>
  <script src="js/owl.carousel.js"></script>
 
      <style>
      #custom .item{
 
    background: #42bdc2;
    padding: 30px 0px;
    margin: 5px;
    color: #FFF;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    text-align: center;
}
 
 
    .customNavigation{
      text-align: center;
    }
    .customNavigation a{
      -webkit-user-select: none;
      -khtml-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    }
    </style>
 
<script>
     $(document).ready(function() {
 
    var owl = $("#custom");
 
    owl.owlCarousel({
    items : 7, //Montre le nb d'items si l'écran du navigateur est supériuer à  1000px browser width
    itemsDesktop : [1000,5], //Montre 5 items si la page du navigateur est comprise entre 1000px et 901px
    itemsDesktopSmall : [900,3], //Montre 3 itmes si la page du navigateur est comprise entre  900px and 601px
    itemsTablet: [600,2], //Montre 2 items si la page est comprise entre 600 and 0
    itemsMobile : false, // itemsMobile disabled - inherit from itemsTablet option
    autoPlay: true,
    });
 
 
});
  </script>
  </body>
</html>

J'ai déjà modifié en tâtonnant les fichiers css sans pour autant trouvé le résultât désiré.
D'avance merci de votre aide.