diff --git a/app/controllers/announcements_controller.rb b/app/controllers/announcements_controller.rb
index 78c1fb9..ccbd0df 100644
--- a/app/controllers/announcements_controller.rb
+++ b/app/controllers/announcements_controller.rb
@@ -596,7 +596,7 @@ class AnnouncementsController < ApplicationController
         "pause_btn_title" => pause_btn_title,
         "prev_btn_title" => prev_btn_title,
         "next_btn_title" => next_btn_title,
-        "carousel_display_style" => (bulletin_carousel_images.count == 0 ? 'display: none' : 'width: 50%;margin: auto;'),
+        "carousel_display_style" => (bulletin_carousel_images.count == 0 ? 'display: none' : "width: #{announcement.carousel_image_width};margin: auto;"),
         "carousel_count" => bulletin_carousel_images.count
       },
       "comments" => announcement.comments,
@@ -680,7 +680,7 @@ class AnnouncementsController < ApplicationController
         "pause_btn_title" => pause_btn_title,
         "prev_btn_title" => prev_btn_title,
         "next_btn_title" => next_btn_title,
-        "carousel_display_style" => (bulletin_carousel_images.count == 0 ? 'display: none' : 'width: 50%;margin: auto;'),
+        "carousel_display_style" => (bulletin_carousel_images.count == 0 ? 'display: none' : "width: #{AnnouncementSetting.last.carousel_image_width};margin: auto;"),
         "carousel_count" => bulletin_carousel_images.count
       },
       "comments" => [],
diff --git a/app/models/announcement_setting.rb b/app/models/announcement_setting.rb
index e4a7810..3f19b45 100644
--- a/app/models/announcement_setting.rb
+++ b/app/models/announcement_setting.rb
@@ -1,7 +1,7 @@
 class AnnouncementSetting
 	include Mongoid::Document
 	include Mongoid::Timestamps
-
+	field :carousel_image_width, type: String, :default => "75%"
 	field :top_limit, type: Integer, :default => 0
 	field :pro_enabled, type: Boolean, :default => false
 	field :approvers, type: Array, :default => []
diff --git a/app/models/bulletin.rb b/app/models/bulletin.rb
index a669e03..1076a5f 100644
--- a/app/models/bulletin.rb
+++ b/app/models/bulletin.rb
@@ -26,6 +26,7 @@ class Bulletin
   before_destroy do
     AnnsCache.all.destroy
   end
+  field :custom_carousel_image_width, type: String, default: ""
   field :image_display_class, type: String, default: "full-size-img" #3 choices: full-size-img , pull-left , pull-right
   field :add_to_calendar,type: Boolean,default: false
   field :calendar_start_date, :type => DateTime
@@ -222,4 +223,7 @@ class Bulletin
   def hidden_text
     I18n.t("announcement.status.hidden")
   end
+  def carousel_image_width
+    (self.custom_carousel_image_width.blank? ? AnnouncementSetting.last.carousel_image_width : self.custom_carousel_image_width)
+  end
 end
diff --git a/app/views/admin/announcements/_form.html.erb b/app/views/admin/announcements/_form.html.erb
index 6d8954c..68a8732 100644
--- a/app/views/admin/announcements/_form.html.erb
+++ b/app/views/admin/announcements/_form.html.erb
@@ -303,6 +303,12 @@
     </div>
     <!-- Images Module -->
     <div class="tab-pane fade" id="carousel_image_upload">
+      <div class="control-group">
+        <label class="control-label muted" for="carousel_image_width"><%= t("announcement.carousel_image_width") %></label>
+        <div class="controls">
+          <%= f.text_field :custom_carousel_image_width, :placeholder => t("announcement.custom_carousel_image_width_hint") %> 
+        </div>
+      </div>
       <% if @bulletin && !@bulletin.bulletin_carousel_images.blank? %>
         <div class="exist">
           <% @bulletin.bulletin_carousel_images.each_with_index do |bulletin_carousel_image, i| %>
diff --git a/app/views/admin/announcements/settings.html.erb b/app/views/admin/announcements/settings.html.erb
index c22115c..60119b7 100644
--- a/app/views/admin/announcements/settings.html.erb
+++ b/app/views/admin/announcements/settings.html.erb
@@ -129,6 +129,12 @@
 <div id="notification"><%= t("announcement.click_on_submit") %></div>
 <%= form_for @setting, url: (@setting.new_record? ? admin_announcement_createsettings_path : admin_announcement_updatesettings_path), html: {class: "form-horizontal main-forms"} do |f| %> 
 <div class="input-area">
+  <div class="control-group">
+    <%= f.label :carousel_image_width, t("announcement.default_carousel_image_width"), :class => "control-label muted" %>
+    <div class="controls">
+        <%= f.text_field :carousel_image_width %>
+    </div>
+  </div>
   <div class="control-group">
     <%= f.label :only_manager_can_edit_status, t("announcement.only_manager_can_edit_status"), :class => "control-label muted" %>
     <div class="controls">
diff --git a/config/locales/en.yml b/config/locales/en.yml
index e787e98..e84df53 100644
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@@ -3,6 +3,9 @@ en:
     feed: Feed
     import: Import
   announcement:
+    custom_carousel_image_width_hint: "If blank, width will be default value."
+    carousel_image_width: Carousel Image Width
+    default_carousel_image_width: Default Carousel Image Width
     cover_image_display_setting: Cover Image display setting
     full_width: Full width
     up_left_corner: Up-left corner
diff --git a/config/locales/zh_tw.yml b/config/locales/zh_tw.yml
index a6b89e9..ff95c97 100644
--- a/config/locales/zh_tw.yml
+++ b/config/locales/zh_tw.yml
@@ -3,6 +3,9 @@ zh_tw:
     feed: 供給
     import: 匯入
   announcement:
+    custom_carousel_image_width_hint: "未填寫，則使用預設寬度"
+    carousel_image_width: 輪播圖片寬度
+    default_carousel_image_width: 預設輪播圖片寬度
     cover_image_display_setting: 封面圖片顯示設定
     full_width: 滿版呈現
     up_left_corner: 左上角
diff --git a/modules/announcement/show.html.erb b/modules/announcement/show.html.erb
index 1273043..b07a546 100644
--- a/modules/announcement/show.html.erb
+++ b/modules/announcement/show.html.erb
@@ -5,6 +5,21 @@
   .full-size-img {
       width: 100%;
   }
+  .s-annc__sub-img.pull-right {
+    margin-left: 2em;
+  }
+  .s-annc__sub-img.pull-left {
+    margin-right: 2em;
+  }
+  strong.carousel__description {
+    color: white;
+  }
+  .carousel_images{
+    {{carousel_display_style}}
+  }
+  @media (max-width: 767px){
+    width: 100%;
+  }
 </style>
 <article class="s-annc show-announcement">
   <h1 class="s-annc__show-title">{{title}}</h1>
@@ -52,7 +67,7 @@
   </ul>
 
 </article>
-<div class="carousel_images" style="{{carousel_display_style}}">
+<div class="carousel_images">
   <div class="w-ba-banner ba-banner-widget-1">
     <div class="w-ba-banner__wrap  cycle-slideshow"
         data-list="bulletin_carousel_images"