画像のスライドショーを右端に表示したい。

実現したいこと

画像のスライドショーを右端に表示したい。

前提

元々は320（横）×240（縦）か240（横）×320（縦）の画像を右端に縦に並べていました。
画像が多くなると縦に長くなってしまうため、画像をスライドショーにまとめられればと思っています。

スライドショーのタグは下記のページを参考にしました。
リンク内容

サイトのテンプレートは下記を使用しています。

リンク内容

参考にしたスライドショーの作り方のページで</head>の真上にコピー＆ペーストすると書かれている部分は既に対応済みです。

発生している問題・エラーメッセージ

スライドショーにはなるのですが、画像の大きさを指定しても横幅が画像の大きさがページの幅の画像になってしまいます。

320（横）×240（縦）の画像の時

240（横）×320（縦）の画像の時

該当のソースコード

HTML

1<section class="content"> 2<h3 class="heading">〇〇〇〇〇〇〇〇〇</h3> 3<article> 4<div class="slider"> 5<img src="images/red.jpg" width="320" height="240" class="alignright frame"> 6<img src="images/blue.jpg" width="240" height="320" class="alignright frame"> 7<img src="images/yellow.jpg" width="320" height="240" class="alignright frame"> 8</div> 9<img src="images/red.jpg" width="320" height="auto" class="alignright frame"> 10<img src="images/blue.jpg" width="240" height="auto" class="alignright frame"> 11<img src="images/yellow.jpg" width="320" height="auto" class="alignright frame"> 12<p>　あいうえおかきくけこさしすせそたちつてと。</p> 13<p>　なにぬねのはひふへほまみむめもやゆよわをん。</p> 14<p style="text-align:right">氏名　へのへの もへじ</p> 15</article> 16</section>

試したこと

・画像の縦をautoにする